节点概述
一般来说,节点至少拥有nodeType,nodeName,nodeValue这三个基本属性
1.元素节点的nodeType为1
2.属性节点的nodeType为2
3.文本节点的nodeType为3(包括换行,文字,空格)
节点层级
1.父节点:node.parentNode
(1)parentNode属性可返回某节点的父节点,注意是最近的一个父节点
(2)如果指定的节点没有父节点则返回null
2.子节点:parentNode.childNodes(标准)
(1)parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合
(2)注意:返回值里面包含了所有的子节点,包括元素节点,文本节点。如果只想要获得里面的元素节点,则需要专门处理
var ul=document.querySelector(‘ul’);
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType==1){
console.log(ul.childNodes[i];} }
(3)推荐使用:parentNode.children
(4)parentNode.firstElementChild:返回第一个子元素节点,找不到则返回null
(5)parentNode.lastElementChild:返回最后一个子元素节点,找不到则返回null(有兼容性问题)
(6)实际开发里的写法:parentNode.children[0] 第一个
parentNode.children[ol.children.length-1] 最后一个
3.兄弟节点:
(1)node.nextSibling:返回当前元素的下一个兄弟节点
(2)node.previousSibling:返回当前元素的上一个兄弟节点
(3)node.nextElementSibling:返回下一个兄弟元素节点
添删等节点操作
1.创建节点:document.createElement(‘tagName’)
2.添加节点:
(1)node.appendChild(child):将一个节点添加到指定父节点的子节点列表末尾,类似于css里面的after伪元素
(2)node.insertBefore(child,指定元素);
3.删除节点:node.removeChild(child):从DOM中删除一个节点,返回删除的节点
4.复制节点(克隆节点):node.cloneNode():返回调用该方法的节点的一个副本
(1)注:如果括号参数为空或者False,则为浅拷贝,即只克隆复制节点本身,不克隆里面的子节点
(2)如果括号参数为true,则为深拷贝,会复制节点本身以及里面所有的子节点
使用节点操作的示例
动态生成表格：
//HTML部分
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
//CSS部分
<style>
table{
width: 800px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,th{
border: 1px solid #333;
}
thead tr{
height: 40px;
background-color: #ccc;
}
</style>
//关键代码：JS部分
<script>
//1.先去准备好学生的数据
var datas=[
{
name:'张三',
subject:'JavaScript',
score:100
},{
name:'李四',
subject:'JavaScript',
score:90
},{
name:'王五',
subject:'JavaScript',
score:80
},{
name:'李六',
subject:'JavaScript',
score:70
}
];
//2.往tbody里创建行,有几个人就创建几行(通过数组的长度)
var tbody=document.querySelector('tbody');
for(var i=0;i<datas.length;i++){ //外循环控制行tr
//创建tr行
var tr=document.createElement('tr');
tbody.appendChild(tr);
//行里面创建单元格td(单元格的数量取决于每个对象里面的属性个数)
for(var k in datas[i]){ //内循环控制列td
var td=document.createElement('td');
//把对象里面的属性值datas[i][k]给td
td.innerHTML=datas[i][k];
tr.appendChild(td);
}
//3.创建有"删除"2个字的单元格
var td=document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
//4.删除操作
var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
//点击a删除当前a所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>