你的位置:首页 > Java教程

[Java教程]访问DOM节点


 

我们来个例子,一个HTML里包含一段文本和一个无序的列表。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript!</title>
</head>
<body>

<p id="intro">My first paragraph...</p>

<ul>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ul>

<script type="text/javascript">
// <![CDATA[

// ]]>
</script>

</body>
</html>

上面例子里,我们使用getElementById DOM方法来访问p段落,在SCRIPT里添加如下代码:

var introParagraph = document.getElementById('intro'); 
// 现在有了该DOM节点,这个DOM节点展示的是该信息段落

变量introParagraph现在已经引用到该DOM节点上了,我们可以对该节点做很多事情,比如查询内容和属性,或者其它任何操作,甚至可以删除它,克隆它,或者将它移到到DOM树的其它节点上。

文档上的任何内容,我们都可以使用JavaScript和DOM API来访问,所以类似地,我们也可以访问上面的无序列表,唯一的问题是该元素没有ID属性,如果ID的话就可以使用相同的方式,或者使用如下getElementsByTagName方式:

var allUnorderedLists = document.getElementsByTagName('ul'); 
// 'getElementsByTagName'返回的是一个节点集合
// - 和数组有点相似

getElementsByTagName

getElementsByTagName方法返回的是一个节点集合,和数组类似也有length属性,重要的一个特性是他是live的——如果你在该元素里添加一个新的li元素,这个集合就会自动更新,介于他和数组类型,所以可以和访问数组一样的方法来访问,所以从0开始:

// 访问无序列表: [0]索引
var unorderedList = document.getElementsByTagName('ul')[0];

// 获取所有的li集合:
var allListItems = unorderedList.getElementsByTagName('li');

// 循环遍历
for (var i = 0, length = allListItems.length; i < length; i++) {
// 弹出该节点的text内容
alert(allListItems[i].firstChild.data);
}