HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。
节点列表是一个节点数组。

下面的代码选取文档中的所有 <p> 节点:

html导航HTML DOM 导航 PHP

实例

varx=document.getElementsByTagName(\"大众p\公众);

可以通过下标号访问这些节点。
如需访问第二个 <p>,您可以这么写:

y=x[1];

考试测验一下 »

把稳:

下标号从 0 开始。

HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以利用 length 属性来循环节点列表:

实例

x=document.getElementsByTagName(\公众p\"大众);for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write(\"大众<br>\"大众);}

实例解析:

获取所有 <p> 元素节点

输出每个 <p> 元素的文本节点的值

导航节点关系

您能够利用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档构造中进行导航。

请看下面的 HTML 片段:

<html><head><metacharset=\公众utf-8\公众></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>这个实例演示了节点的关系。
</p></div></body></html>

首个 <p> 元素是 <body> 元素的首个子元素(firstChild)

<div> 元素是 <body> 元素的末了一个子元素(lastChild)

<body> 元素是首个 <p> 元素和 <div> 元素的父节点(parentNode)

firstChild 属性可用于访问元素的文本:

实例

<pid=\公众intro\"大众>Hello World!</p><script>x=document.getElementById(\公众intro\公众);document.write(x.firstChild.nodeValue);</script>

考试测验一下 »

DOM 根节点

这里有两个分外的属性,可以访问全部文档:

document.documentElement - 全部文档

document.body - 文档的主体

实例

<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>这个实例演示了 <b>document.body</b> 属性。
</p></div><script>alert(document.body.innerHTML);</script>

考试测验一下 »

childNodes 和 nodeValue

除了 innerHTML 属性,您也可以利用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id=\"大众intro\公众 的 <p> 元素的值:

实例

<pid=\公众intro\公众>Hello World!</p><script>txt=document.getElementById(\"大众intro\"大众).childNodes[0].nodeValue;document.write(txt);</script>

考试测验一下 »

在上面的例子中,getElementById 是一个方法,而 childNodes 和 nodeValue 是属性。