节点

节点操作

节点概述

网页页面中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中节点以Node来表示

在使用DOM操作对节点实现修改、添加、删除操作

一般情况下，节点至少拥有三个基本属性

1. nodeType：节点类型，这里的类型是标签的名称
2. nodeName：节点名称，这里的名称是js中给这个节点起的一个名字
3. nodeValue：节点值

创建节点

document.createElement(“div”)

document.createElement(tagName)方法创建由tagName指定的HTML元素，因为这些元素原先不存在document里面，而是根据我们的需求动态创建的，所以这种创建方式的元素叫做动态节点

同时创建的节点需要添加到HTML文档中

添加节点

1. node.appedChild(节点)，方法将一个节点元素添加到指定的父节点中的最后一个子节点之后
2. node.insertBefore(节点,子节点)，方法将一个节点元素添加到指定的父节点中的指定子节点之前

节点层级

利用DOM将节点划分为不同的层级关系，常见的层间关系就是父子关系

一般操作包含以下：

1. 父级节点：node.parentNode

2. 子级节点：

   1. node.childNodes(标准)，返回包含指定子节点的集合，这个集合会进行即时更新

      注意：

      返回值里面包含了所有的子节点包括孙子级别，还包含有文本节点，如果只想要获取里面的元素节点，需要专门处理。因此一般不用这个方式

   2. parentNode.children(非标准)，是一个只读属性，返回所有的子元素节点，它只返回子元素节点，不会返回浏览器的格式化节点

      之后主要使用这个属性

3. 第一个子节点：parentNode.firstChild

   返回第一个子节点，找不到则返回null，同样包含文本节点

4. 最后一个子节点：parentNode.lastChild

   返回最后一个子节点，找不到则返回null，同样包含文本节点

5. 第一个子元素节点：parentNode.firstElementChild

   返回第一个子元素节点，找不到则返回null，只找元素，IE9之后

6. 最后一个子元素节点：parentNode.lastElementChild

   返回最后一个子元素节点，找不到则返回null，只找元素，IE9之后

7. 兄弟节点：

   上一个元素兄弟节点：self.previousElementSibling

   下一个元素兄弟节点：self.nextElementSibling

   上面两个只管元素问题，有兼容问题

   上一个兄弟节点：self.previousSibling

   下一个兄弟节点：self.nextSibling

   上面两个找所有的节点包含文本节点