【前端】JavaScript-节点操作

目录

一、节点操作

节点层次

1.父节点 parentNode

2.子节点

3.兄弟节点

创建节点 

添加节点 

删除节点

复制节点

三种动态创建元素区别

---

一、节点操作

利用节点的层级关系获取元素

• 利用父子兄弟节点关系获取元素
• 逻辑性强，但是兼容性稍差

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

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点包含文字、空格、换行等）

实际开发中，节点操作主要操作的是元素节点。

节点层次

利用DOM树可以把节点划分为不同的层次关系，常见的是父子兄层级关系。

1.父节点 parentNode

得到的是离元素最近的父节点，如果找不到父节点则返回null。

2.子节点

1.

父元素.childNodes(标准）

得到的是一个集合，包含所有的子节点，包含文字节点和元素节点等。

如果 只想要获得里面的元素节点，则需要专门处理。所有我们一般不提倡使用childNodes

        var ul = document.querySelector('ul');
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                //ul.childNodes[i]是元素节点
                console.log(ul.childNodes[i]);
            }
        }

2. 

父元素.children(非标准）

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点掌握）。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用。

3.

父元素.firstChild  //返回第一个子节点，找不到则返回null。同样也是包含所有的节点

父元素.lastChild   //返回最后一个子节点，找不到则返回null。同样也是包含所有的节点


父元素.firstElementChild   //返回第一个子元素节点，找不到则返回null，IE9以上支持

父元素.lastElementChild   //返回最后一个子元素节点，找不到则返回null，IE9以上支持

实际开发写法：

父元素.children[0]  //第一个
父元素.children[长度-1】 //最后一个

3.兄弟节点

节点.nextSibling    //返回下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

节点.previousSibling   //返回上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点


节点.nextElementSibling   //返回当前元素下一个兄弟元素节点，找不到返回null，IE9以上支持

节点.previousElementSibling   //返回当前元素上一个兄弟元素节点，找不到返回null，IE9以上支持

解决方法：

封装一个兼容性的函数

创建节点 

        document.createElement('tagName')

创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点 

父节点.appendChild(子节点)    //将节点添加到指定父节点的子节点列表末尾

父节点.insertBefore(插入的元素,指定元素) 将节点添加到指定父节点的指定子节点前面

        //1.创建节点
        var li=document.createElement('li');
        //2.添加节点
        var ul=document.querySelector('ul');
        ul.appendChild(li);
        //3.前面添加节点
        var lili=document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);

删除节点

父节点.removeChild(要删除的子节点)   //从DOM中删除一个子节点，返回删除的节点

复制节点

要复制的节点.cloneNode()    //返回调用该方法的节点点的一个副本，也称为克隆节点/拷贝节点

注意：

1. 如果括号为空或者false为浅拷贝，只复制标签不复制内容
2. 如果括号里为true为深拷贝，则复制标签及内容

三种动态创建元素区别

        document.write() //直接将内容写入页面的内容，但是文档流执行完毕，则它会导致页面全部重绘   
        element.innerHTML //将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
        document.createElement() //创建多个元素效率低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率比createElement高。