DOM

选取文档元素

• 用指定的id属性
  • getElementById(id)
  • 返回element对象
• 用指定的name属性
  • getElementByName(name)
  • 返回NodeList对象
• 用指定的标签名字
  • getElementByTagName(tag_name)
  • 返回NodeList对象
• 用指定的CSS类
  • getElementByClassName(class)
  • 返回NodeList对象
• 匹配指定的CSS选择器
  • queueSelectorAll()
  • 返回NodeList对象

NodeList对象不是历史文档状态的一个静态快照，而通常是实时的，并且当文档变化时它们所包含的元素列表能随之改变，这是其中一个最重要和令人惊讶的特性。

但是通过queueSelectorAll() 返回的NodeList对象并不是实时的。它包含在调用时刻选择器所匹配的元素，但它并不更新后续文档的变化。

文档结构与遍历

parentNode

该元素的父节点。

childNodes

只读的类数组对象，它是该节点的子节点的实时表示

firstChild, lastChild

该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null

nextSiblings, prevSublings

该节点的兄弟节点的前一个和下一个。

nodeType

该节点的类型。9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点。

nodeValue

Text节点或Comment节点的文本内容

nodeName

元素的标签名，以大写形式表示

setAttribute(name, value)

设置元素的属性

getAttribute(name)

得到元素指定的属性

hasAttribute(name)

检测元素是否存在指定的属性

removeAttribute(name)

删除元素指定的属性

innerHTML

获取元素的内容(HTML字符串); 在元素上设置该属性调用了Web浏览器的解析器，用新字符串内容的解析展现形式替换元素当前内容。

textContent, (IE innerText)

获取纯文本形式的元素内容，或者在文档中插入纯文本

创建，插入和删除文本

document.createElement()

// 创建一个<script>元素   
var newNode = document.createElement('script'); 

Element.cloneNode(boolean)

// 复制已有的节点
// 给方法传递true表示能够递归的复制所有的后代节点，传递false表示只执行浅复制
var newNode = document.getElementById('app').cloneNode(true);

parent.appendChild(child)

// 在指定节点上插入新的节点使其成为那个指定节点的最后一个子节点
var child = document.createElement('script');
script.src = "xxxx";
document.head.appendChild(child);

parent.insertBefore(newNode, node)

// 在指定节点上插入新节点，新节点插入在已存在节点的前面
parent.insertBefore(child, parent.childNode[2]);

如果调用appendChild()或insertBefore()将已存在文档中的一个节点再次插入，那个节点将自动从它当前的位置删除并在新的位置重新插入：没有必要显式删除节点

parent.removeChild(child)

// 删除某个节点
var node = document.getElementById('app');
node.parentNode.removeChild(node);

parent.replaceChild(newNode, node)

// 替换某个节点
var node = document.getElementById('app');
var newNode = document.createElement("p");
newNode.textContent = "Hello world";
node.parentNode.replaceChild(newNode, node);