DOM 编程

傷城~ 2024-03-25 09:48 67阅读 0赞

#### *DOM编程进阶 3-10 作者：琪要玖* ####

###### 一.节点 ######

定义：

*  **网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。**

*  **HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。**

注意：

般的，节点至少拥有nodeType(节点类型)、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

**【总结】我们在实际开发中，节点操作主要操作的是"元素节点"。**

##### 例子：选向卡 ----项目需要 #####

<styletype="text/css">

\*\{margin:0px;padding: 0px;list-style: none\}

\#container\{

width: 512px;

height: 302px;

border: 1pxsolidred;

margin: 0auto;

\#container .nav\{

width: 510px;

height: 40px;

border: 1pxsolidblue;

\#container .content\{

width: 510px;

height: 260px;

border: 1pxsolidyellow;

ulli\{

float: left;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

border: 1pxsolidorange;

.active\{

background-color: red;

color: yellow;

.contentdiv\{

display: none;

</style>

</head>

<body>

<divid="container">

<divclass="nav">

<ul>

<liclass="active">aaa</li>

</ul>

</div>

<divclass="content">

<divstyle="display: block">aaaaaaaaaa</div>

<div>bbbbbbbbbbb</div>

<div>cccccccccccc</div>

<div>ddddddddddd</div>

<div>eeeeeeeeee</div>

</div>

<scripttype="text/javascript">

//获取页面上所有的li标签

varoLis=document.getElementsByTagName('li');

//content

varcontent=document.querySelector('.content');

varoDivs=content.querySelectorAll('div');

console.log(oDivs);

// console.log(oLis);

for(vari=0;i<oLis.length;i++)\{

//循环时 可以根据自定义索引设置值

//setAttribute();设置标签的属性值

//getAttribute() 获取属性的值

oLis\[i\].setAttribute('index',i);

oLis\[i\].οnclick=function()\{

console.log(this.getAttribute('index'));

// console.log(this.innerHTML);

//排它思想

//将所有的li标签上的样式全部清空

for(vari=0;i<oLis.length;i++)\{

//className 设置css类选择器

oLis\[i\].className='';

//清空样式后，可以根据this获取当前点击的li

// console.log(this.innerHTML)

this.className='active';

// alert(i);

for(vari=0;i<oDivs.length;i++)\{

oDivs\[i\].style.display='none';

oDivs\[this.getAttribute('index')\].style.display='block';

\};

</script>

</body>

###### 三.节点操作 ######

使用原因：

1.根据DOM提供的方法获取 getElememtByid :逻辑差

2.根据根据元素的层次关系提供的方法来获取

###### 方法 ######

a.childNodes 获取所有的字标签（标准的方法 不兼容）包含空格

</ul>

<buttonοnclick="b();">childNodes</button>

<scripttype="text/javascript">

functionb()\{

varoUl=document.getElementById("oUl");

varsons=oUl.childNodes;

console.log(sons.length);

</script>

b.parentNode 获取父节点

<liid="oLi1">ul-1-li:曾经沧海难为水></li>

</ul>

<buttonοnclick="a();">parentNode</button>

<scripttype="text/javascript">

//id = oLi1

functiona()\{

varoli1=document.getElementById("oLi1");

//获取父节点

varparentUl=oli1.parentNode;

parentUl.style.border="1px solid red";

\}//输出ul

c.children 获取所有的字标签（标准的方法 不兼容）不包含空格

<liid="oLi1">ul-1-li:曾经沧海难为水></li>

</ul>

<buttonοnclick="c();">children（非标准 兼容所有的浏览器）</button>

<scripttype="text/javascript">

functionc()\{

varoUl=document.getElementById("oUl");

varsons=oUl.children;

console.log(sons.length);

d.firstChild 获取第一个子节点

<buttonοnclick="d();">firstChild</button>

<scripttype="text/javascript">

functiond()\{

varoUl=document.getElementById("oUl");

varsons=oUl.firstChild;

console.log(sons);//获取的结果为空格

</script>

e.lastchild 获取最后字节点

<liid="oLi1">ul-1-li:曾经沧海难为水></li>

<liid="zz">ul-1-li:东方国际哦i或多个></li>

</ul>

<buttonοnclick="e();">lastChild</button>

<scripttype="text/javascript">

functione()\{

varoUl=document.getElementById("oUl");

varsons=oUl.lastChild;

console.log(sons);//获取的结果为空格

f.previousElementSiblingg *返回当前元素在其父元素的子元素节点中的前一个元素节点，如果该元素已经是第一个元素节点，则返回 null, 该属性是只读的。 …*

<liid="oLi1">ul-1-li:曾经沧海难为水></li>

<liid="zz">ul-1-li:东方国际哦i或多个></li>

<liid="sb4">ul-4-li:身无彩凤双飞翼《无题·昨夜星辰昨夜风》</li>

<p>5-p:等待属于我们的时代。<span>——水晶先锋斯卡纳</span></p>

</ul>

<buttonοnclick="k();">previousElementSiblingg</button>

<scripttype="text/javascript">

functionf()\{

varsb4=document.getElementById("sb4");

varsons=sb4.previousElementSiblingg;

console.log(sons);//获取的结果为空格

###### g.nextElementSiblin 返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 ， 该属性是只读的。null ######

<liid="oLi1">ul-1-li:曾经沧海难为水></li>

<liid="zz">ul-1-li:东方国际哦i或多个></li>

<liid="sb4">ul-4-li:身无彩凤双飞翼《无题·昨夜星辰昨夜风》</li>

<p>5-p:等待属于我们的时代。<span>——水晶先锋斯卡纳</span></p>

</ul>

<buttonοnclick="j();">nextElementSibling</button>

<scripttype="text/javascript">

functionj()\{

varsb4=document.getElementById("sb4");

varsons=sb4.nextElementSibling;

console.log(sons);//获取的结果为空格

h.firstElementChild 只读属性，返回对象的第一个子 元素， 如果没有子元素，则为 null

<buttonοnclick="f();">firstElementChild</button>

<scripttype="text/javascript">

functionf()\{

varoUl=document.getElementById("oUl");

varsons=oUl.firstElementChild;

console.log(sons);//获取的结果为空格

i.lastElementChild 只读属性，返回对象的第最后一个子 元素， 如果没有子元素，则为 nul

<buttonοnclick="g();">lastElementChild</button>

<scripttype="text/javascript">

functiong()\{

varoUl=document.getElementById("oUl");

varsons=oUl.lastElementChild;

console.log(sons);//获取的结果为空格

j.previousSibling 返回当前节点的前一个兄弟节点

k. appendChild() 将指定的标签追加到标签内容的末尾

varoDiv=document.getElementById("oDiv");

oDiv.appendChild(p);

//注意不需要 < > </>

m.移除

// //获取id为li2的li标签

varli2=document.getElementById("li2");

//根据子节点获取父节点

varul=li2.parentNode;

ul.removeChild(li2);

###### 四.表格对象 ######

1.DOM生成一个表格对象（table,tr,td）

2.完成表格操作（新增，删除等等

3.Table对象

rows属性：获取表格中所有的tr标签【集合】

cells属性：获取某行的所有单元格【集合】

insertRow(index) :在指定表格中的指定下标行处插入一个tr

deleteRow(index):删除指定下标的行

4.tr对象

insertCell(index) 指定行上添加一个单元格

varoTab=document.querySelector("table");

console.log(oTab.rows.length);//行数数组的长度

//console.log(oTab.rows\[0\].cells.length);

// var tr = oTab.insertRow(3);//返回当前所创建的tr

//删除

//oTab.deleteRow(1);

//在下标为3的位置处插入了tr

vartr=oTab.insertRow(3);

vartd1=tr.insertCell(0);

tr.insertCell(1);

tr.deleteCell(1);

td1.innerHTML="<button>点击</button>"

DOM 编程

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 DOM 编程

相关 JavaScript-DOM编程

相关 Javascript DOM编程

相关 36-JavaScript-DOM-dom编程初解

相关 javascript DOM编程基础

相关 DOM编程艺术

相关 Bom编程·事件编程·Dom编程学习

相关 DOM编程

相关 DOM编程

相关 JavaScript DOM编程