JavaScript的节点操作

• 节点概述
• 节点层级
• 添删等节点操作
• 使用节点操作的示例

节点概述

一般来说,节点至少拥有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>