这些JavaScript节点操作你都知道嘛？

---

1、什么是节点

​ 网页页面中所有的内容都是节点，包括标签、属性、文本以及注释……等，在DOM中节点以Node来表示，使用DOM操作节点主要是对节点进行创建、添加、修改和删除……等的操作。

2、节点操作的基本属性

• nodeType：节点类型，这里的类型指的是标签的名称
• nodeName：节点的名称，这里的名称是JavaScript中给这个节点起的一个名字
• nodeValue：节点值

3、创建节点

3.1 元素节点

• creatElement方法创建

//语法格式：document.creatElement("节点类型");
//注意：1、可以创建元素，但是只是创建了非结构中的元素2、它不会自动添加到结构内部3、创建多个元素的效率较低3、结构清晰简单

解释：

​ 该方法创建由tagName指定的HTML元素，因为这些元素原先不存在DOM文档中，而是根据我们的需求动态创建的，所有这种创建元素节点的方式叫做动态创建节点

• 文档对象.write方法创建

document.write("标签或者文本");
//注意：1、直接将内容写入到页面的内部流去去2、当文档流执行完毕，会导致页面重绘，也就是HTML头部的声明丢失了3、所有它可以识别有效标签

• 元素对象.innerHTML属性创建

元素对象.innerHTML = "标签或者文本"
//注意：1、将内容写如到当前节点的内部2、不会导致页面重绘3、可以创建多个元素，以及关系，并且也不需要连接字符串的操作，所以工作效率高，并且会识别有效标签4、写法结构比较复杂

3.2 文本节点

//语法格式：document.creatTextNode("文本值");
//注意：创建好文本节点以后一定要记得添加到某个元素节点中

4、添加节点

• 添加到父节点最后一个子节点之后

//语法格式：父节点.appendChild("节点名");
//说明：该方法将一个节点添加到指定父节点中最后一个子节点之后

• 添加到指定父节点中的指定子节点之前

//语法格式：父节点.insertBefor(节点，子节点);
//说明：该方法将一个节点元素添加到指定的父节点中的指定子节点之前

5、节点层级

5.1 介绍

​ 利用DOM可以将节点划分为不同的层级关系，常见的层继关系就是父子关系。

5.2 相关操作

5.2.1 父子关系

​ 1、获取父级节点

//语法格式：子级节点.parentNode;

​ 2、子级节点

• 返回包含所有子节点的nodeList（标准），这个集合会进行即使更新

//语法格式：当前节点.childNodes;
//注意：返回值里面包含了所有的子节点，包括孙子级别的节点，以及文本节点，如果只想获取里面的元素节点，则需要专门的处理。因此一般不会采用这种方式

• 返回包含所有子元素节点的伪数组(非标准)，不返回浏览器的格式化节点，所有常用这个属性

//语法格式：当前节点.children;
//注意：该属性是一个只读属性，之后经常使用该属性来获取所有的子级元素节点

• 返回第一个子级节点

//语法格式：当前节点.firstChild;
//注意：返回第一个子节点，找不到则返回null，同样包含文本节点

• 最后一个子级节点

//语法格式：当前节点.lastChild;
//注意：返回最后一个子节点，找不到则返回null，同样包含文本节点

• 第一个子元素节点

//语法格式：当前节点.firstElementChild;
//注意：返回第一个子元素节点，找不到则返回null，只找元素，IE9之后

• 最后一个子元素节点

//语法格式：当前节点.lastElementChild;
//注意：返回最后一个子元素节点，找不到则返回null，只找元素，IE9之后

5.2.2 兄弟关系

• 返回当前元素的上一个兄弟元素

//语法格式：当前元素.previousElementSibling;
//注意：只管元素，有兼容问题

• 返回当前元素的下一个元素兄弟元素

//语法格式：当前元素.nextElemengtSibling;
//注意：只管元素，有兼容问题

• 返回当前元素的上一个兄弟节点

//语法格式：当前元素.previoustSibling;
//注意：包含文本节点

• 返回当前元素的下一个兄弟节点

//语法格式：当前元素.nextSibling;
//注意：包含文本节点

6、删除节点

• 可以通过父节点的removeChild(子节点)方法来删除对应的子节点

父节点.removeChild(要删除的元素对象);
//注意：1、返回被删除的元素对象2、只能删除自身的子节点，兄弟节点的子节点无效，反抛异常

• 自己删除自己

元素对象.remove();
//注意：直接将当前元素节点删除，连带自己的子节点

7、拷贝节点

元素节点名.cloneNode(是否深拷贝)；
//说明：1、克隆当前的这个元素节点2、返回克隆结果3、参数是Boolean类型，表示是否深拷贝
//拷贝：1、深拷贝：将元素自己包括自己的子元素也复制过来2、浅拷贝：只将自己这个元素节点复制过来

8、替换节点

• 将节点替换为字符串

//语法格式：
节点对象.replaceWith(DOMstrong);

• 替换当前节点对象的指定子节点

//语法格式：
当前节点对象.replaceChild(新的子节点，旧的子节点);