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

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

---

1、什么是节点

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

2、节点操作的基本属性

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

3、创建节点

3.1 元素节点

//语法格式：
	document.creatElement("节点类型");

解释：

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

​ 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(要删除的节点);