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>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
<divclass="content">
<divstyle="display: block">aaaaaaaaaa</div>
<div>bbbbbbbbbbb</div>
<div>cccccccccccc</div>
<div>ddddddddddd</div>
<div>eeeeeeeeee</div>
</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 id="oul">
</ul>
<buttonοnclick="b();">childNodes</button>
<scripttype="text/javascript">
functionb(){
varoUl=document.getElementById("oUl");
varsons=oUl.childNodes;
console.log(sons.length);
}
</script>
b.parentNode 获取父节点
<ul id="oul">
<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 获取所有的字标签（标准的方法 不兼容）不包含空格
<ul id="oul">
<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 获取最后字节点
<ul id="oul">
<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, 该属性是只读的。 …
<ul id="oul">
<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
<ul id="oul">
<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>"
