[译] DOM 脚本编程中最常用的方法抄记

由 Christian Heilmann (http://wait-till-i.com)整理

获取文档中的元素

document.getElementById('id')：通过所给的 id 来获取元素(作为对象)

document.getElementsByTagName('tagname')：通过标签名 tagname 来获取所有的元素(保存在类似列表的数组中)

读写元素的属性、节点值和其他数据

node.getAttribute('attribute')：通过 attribute (属性)名来获取该属性的值。

node.setAttribute('attribute', 'value')：通过 attribute (属性)名来设置该属性的 value(值)。

node.nodeType：读取 node(节点) 的类型(1 是元素、3是文本节点)

node.nodeName：读取 node(节点) 的名称(元素名或 #textNode)

node.nodeValue：读取或写入 node(节点) 的值(如遇是文本节点的话，值就是文本内容)

在节点间的操作

node.previousSibling：获取先前的兄弟节点。(作为对象保存)

node.nextSibling：获取后接的兄弟节点。(作为对象保存)

node.childNodes：获取对象的所有子节点。(保存在类似列表的数组中)node.firstChild、node.lastChild是第一个和最后一个节点。

node.parentNode：获取包含 node 的父节点。

创建新的节点

document.createElement(element)：通过 element (元素)名来创建新的元素节点。(element 名必须使用字符串)

document.createTextNode(string)：通过 string 的节点值来创建新的文本节点。

newNode = node.cloneNode(bool)：创建 newNode 作为 node 的拷贝。若 bool 为 true，该克隆则包含所有原来的子节点的克隆。

node.appendChild(newNode)：将 newNode 作为最新的节点添加到节点中去。(放到最后的位置)

node.insertBefore(newNode,oldNode)：将 newNode 作为新的子节点插到 oldNode 的前面。

node.removeChild(oldNode)：在节点中移除子 oldNode(节点)。

node.replaceChild(newNode, oldNode)：用 newNode 替换该节点的子节点 oldNode。

element.innerHTML：用字符串来读或写所给元素的 HTML 内容，包括所有的子节点，还有属性和文本内容。

浏览器技巧必知必会

getAttribute、setAttribute在浏览器的兼容上会不太靠谱，而推荐直接用元素对象的属性来赋值：obj.property = value。另外，有些属性值是保留字，所以，class用className，for用HTMLfor。

有的浏览器会将代码中的换行作为文本节点放入 childNodes 集合中，所以先必须用 nodeType检查测试并踢除出去。

pdf下载：JavaScript-DOM-Cheatsheet