[译] 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.firstChildnode.lastChild是第一个和最后一个节点。

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

创建新的节点

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

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

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

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

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

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

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

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

浏览器技巧必知必会

getAttributesetAttribute在浏览器的兼容上会不太靠谱,而推荐直接用元素对象的属性来赋值:obj.property = value。另外,有些属性值是保留字,所以,classclassNameforHTMLfor

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

pdf下载:JavaScript-DOM-Cheatsheet

posted on 2010-10-29 14:32  豆豆の爸爸  阅读(312)  评论(0编辑  收藏  举报