文档对象模型(DOM)

首页 > JavaScript浏览器对象 > 文档对象模型(DOM)

■ 一览

appendChild(), childNodes, createElement(), firstChild , getElementById(), getElementsByName(), getElementsByTagName(), lastChild, nextSibling, parentNode, previousSibling

■ DOM是什么

DOM 是 Document Object Model 的缩写。是一组 W3C 在 1998 年推荐的用来控制 HTML 和 XML 中各元素的接口。核心层并没有依存特定的语言,比较流行的是与 JavaScript 等语言互通。DOM 从 IE5.0 开始被支持。这里主要介绍一些 JavaScript DOM的基本操作。

■ 访问某一元素

document.getElementById(id)

通过 id 属性访问某一元素。

oElement = document.getElementById("id1");
element.getElementsByTagName(tagName)

通过标签名访问一组元素(数组)。

oElements = document.getElementsByTagName("span");
oElements = oElement.getElementsByTagName("span");
element.getElementsByName(name)

通过 name 属性访问一组元素(数组)。

oElements = document.getElementsByName("namae");
oElements = oElement.getElementsByName("namae");
element.childNodes
element.parentNode
element.firstChild
element.lastChild
element.previousSibling
element.nextSibling

访问某个元素的父元素或子元素。

oElements = oElement.childNodes;         // 子元素数组
oElement = oElement.parentNode;          // 父元素
oElement = oElement.firstChild;          // 第一个子元素
oElement = oElement.lastChild;           // 最后一个子元素
oElement = oElement.previousSibling;     // 上一个同级元素
oElement = oElement.nextSibling;         // 下一个同级元素

■ 从元素数组中取出元素

要从元素数组中取出元素可以像下面这样写。id1 是元素的 id 属性指定的名字。

n = oElements.length;
oElement = oElements[0];
oElement = oElements(0);
oElement = oElements.id1;
oElement = oElements.item(0);
oElement = oElements.item("id1");
oElement = oElements.namedItem("id1");
oElements = oElements.tags("span");

要遍历元素数组里的每个元素,可以像下面这样写。

for (i = 0; i < oElements.length; i++) {
    oElement = oElements[i];
       :
}

■ 访问元素内的文字

要访问元素内的文本文字可以像下面这样写。

sStr = oElement.firstChild.nodeValue;
sStr = oElement.innerText;
sStr = oElement.innerHTML;

■ 访问与设定属性

◆ 访问元素的属性值

要访问元素的属性值可以像下面这样写,比如要访问元素的 id 属性。

value = oElement.id;
value = oElement.getAttribute("ID");
value = oElement.getAttributeNode("ID").value;
value = oElement.getAttributeNode("ID").nodeValue;
value = oElement.attributes.getNamedItem("ID").value;
value = oElement.attributes.getNamedItem("ID").nodeValue;
◆ 设定元素的属性值

要设定元素的属性值可以像下面这样写,比如要设定元素的 id 属性。

oElement.id = value;
oElement.setAttribute("ID", value);
oElement.getAttributeNode("ID").value = value;
oElement.getAttributeNode("ID").nodeValue = value;
oElement.attributes.getNamedItem("ID").value = value;
oElement.attributes.getNamedItem("ID").nodeValue = value;
oElement.setAttributeNode(oAttr);

■ 生成新元素

◆ document.createElement(tagName)
element.appendChild(element)

用 createElement() 可以生成新元素。appendChild() 可以把生成的元素追加为子元素。

<script type="text/javascript">
<!--
function func() {
    var oImg = document.createElement('img');
    oImg.setAttribute("src", "xxx.gif");
    var oDiv = document.getElementById("id123");
    oDiv.appendChild(oImg);
}
// -->
</script>
<div id="id123"></div>
<input type="button" value="OK" onclick="func()">