JS节点（node）- DOM 对象属性及方法

什么是节点：

• 页面中所有的东西都是节点，所有的节点都是对象

节点名	nodeType(返回节点的类型,只读)	nodeName(规定节点的名称)	nodeValue(规定节点的值)
元素节点	1	大写的标签名	undefined 或 null
属性节点	2	与属性名相同	属性值
文本节点	3	‘#text’	文本的内容
注释节点	8	‘#comment’	注释的内容
文档节点	9	‘#document’	null

• 元素节点就是页面中的标签
• 文本节点包括内容、空格、回车(换行)
• 注释节点就是你写的注释
• 文档节点就是整个大文档(整个页面)
• localName 小写 标签名
• tagName 大写 标签名

DOM 对象属性

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

• childNodes ：获取的所有的子节点
• children ：获取所有的元素子节点（子元素标签集合）（在IE6~8下不兼容）
• firstChild ：获取第一个子节点
• lastChild ：获取最后一个子节点
• firstElementChild ：获取第一个元素子节点（在IE6~8下不兼容）
• lastElementChild ：获取最后一个元素子节点（在IE6~8下不兼容）
• previousSibling ：获取上一个同级节点（获取上一个哥哥节点）
• nextSibling ：获取下一个同级节点（获取下一个弟弟节点）
• previousElementSibling：获取上一个同级元素节点（在IE6~8下不兼容）（获取哥哥元素节点）
• nextElementSibling ：获取上一个同级元素节点（在IE6~8下不兼容）（获取弟弟元素节点）
• parentNode ：获取父节点
• innerHTML：操作的是节点（元素）的文本值（可以识别标签）
• innerText：操作的是节点（元素的文本值（不可以识别标签）
• attributes - 节点（元素）的属性节点

DOM 对象方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

• contains： contains() 方法用于检测一个 DOM 节点是否在另一个 DOM 节点内部，可以对 DOM 元素进行递归检查，以便检查嵌套节点层次结构。该方法返回一个布尔值，代表被检查的节点是否包含在指定的节点内部。

JS节点的增删改

• createElement：创建元素节点
• createTextNode：创建文本节点
• 容器.appendChild(节点)：把节点插入到容器的末尾
• 容器.insertBefore(新节点，老节点)：把新节点插入到老节点的前面
• 容器.removerChild(节点)：移除容器中的节点
• 容器.replaceChild(newnode,oldnode) 在指定的子节点前面插入新的子节点

JS动态克隆节点

• 节点.cloneNode(true/false)
  • 克隆节点，如果传参是true就是深克隆，如果不传参或者传false就是浅克隆（只复制外层元素，不复制里边的内容）

增加行内属性

• createAttribute() 创建属性节点
• setAttribute(‘属性名’,属性值)； 在元素结构中设置属性,setAttributeNode可以只放一个createAttribute返回值作为参数
• getAttribute(‘属性名’) 在元素结构中获取属性
• removeAttribute(‘属性名’); 在元素结构中移除属性

如何修改 HTML 元素

• 修改 HTML DOM 意味着许多不同的方面：
  改变 HTML 内容
  改变 CSS 样式
  改变 HTML 属性
  创建新的 HTML 元素
  删除已有的 HTML 元素
  改变事件（处理程序）