DOM节点关系及节点操作

DOM把HTML和XML文档视为一种树结构，这种结构称为节点树(DOM Tree)，浏览器载入文档后，文档中的标签被解析成一系列的节点，**节点是DOM的最小组成单位**。**每一个节点都是一个对象**，都具备特定的属性和方法。而且节点之间彼此都有关系。

注意：DOM不属于JavaSript，因为Java中也存在，它仅仅是一套API。

• DOM节点的属性：节点对象.nodeType；元素节点返回 1,属性节点返回 2 ,文本节点返回3,注释节点返回8,文档节点返回9.

• 节点对象.nodeName：节点名称就是DOM节点的名字，不同类型的节点对应不同的节点名称。 元素节点返回 HTML标签的名称（大写）,
  属性节点返回 属性的名称 ,文本节点返回 #text, 文档节点返回 #document. 注释节点返回 #comment.、

• 获取节点对象节点值的API的语法：节点对象.nodeValue
  对于文本节点，节点值是文本内容； 对于属性节点，节点值是属性的值。 文档节点和元素节点没有节点值。

• 获取节点对象文本值的API的语法：节点对象.textContent；
  属性返回指定节点的文本内容，以及它的所有后代。如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。

• Element.innerHTML
  属性返回该元素包含的HTML代码。该属性可读写，常用来为某个节点设置内容。如果将该属性设为空，等于删除所有的子节点删除。

• Element.outerHTML
  属性返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。该属性可读可写。

• document.createAttribute()
  方法生成一个新的属性对象节点，并返回它。createAttribute方法的参数name，是属性的名称。创建好的属性节点应该被设置给元素节点。如：var newNode = document.creatElement(‘span’);
  newNode.setAttribute(属性名，属性值)
  或
  var node = document.getElementById(“div1”);
  var a = document.createAttribute(“my_attrib”);//属性名
  a.value = “newVal”;//属性值
  node.setAttributeNode(a);

• DOM节点间关系：

**每一个节点都带有一个childNodes属性，其内部保存着一个NodeList对象，**该对象类似于数组，但不是数组。该节点所有的子元素都会被装在这个数据结构里面。我们可以像访问数组元素一样访问其中保存的子节点对象。如果该节点不包含任何节点，就返回一个空的集合。

同一层次的节点之间，可以通过previousSibling属性获取已知节点的前一个节点。通过nextSibling属性获取下一个节点。

• 规律：
  1、如果已知节点是第一个，那么它的previousSibling节点就为null；
  2、如果已知节点是最后一个，那么它的nextSibling节点也为null；
  3、如果已知节点是父节点中的唯一一个，那么它的previousSibling和nextSibling节点都也为null，且该父节点的firstNode和lastNode都为同一个节点。

• 创建DOM元素
  createElement(标签名) 创建一个节点
  appendChild(节点) 追加一个节点
  例子：留言板插入内容

• 插入元素
  insertBefore(节点, 原有节点) 在已有元素前插入
  例子：倒序留言板插入内容

• 删除DOM元素
  removeChild(节点) 删除一个节点
  例子：删除留言

• 替换DOM元素
  replaceChild(节点, 已有节点) 替换节点