非常教程

HTML DOM参考手册

HTML DOM 导航

HTML DOM 导航

HTML DOM 导航


通过 HTML DOM,您能够使用节点关系在节点树中导航。


HTML DOM 节点列表

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

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

实例

var x=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> <meta charset="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 属性可用于访问元素的文本:

实例

<p id="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> 元素的值:

实例

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

尝试一下 »

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

在本教程中,我们将使用 innerHTML 属性。不过,学习上面的方法有助于对 DOM 树结构和导航的理解。

HTML DOM 导航

HTML DOM目录

1.XML DOM 教程
2.HTML DOM 教程
3.XML DOM – 节点列表和命名节点图
4.XML DOM 节点信息
5.XML DOM 访问节点
6.XML DOM 方法
7.XML DOM 加载函数
8.XML DOM 解析器
9.XML DOM – 节点
10.XML DOM 简介
11.XML DOM – 添加节点
12.XML DOM – 创建节点
13.XML DOM – 替换节点
14.XML DOM – 删除节点
15.XML DOM – 改变节点值
16.XML DOM – 获取节点值
17.XML DOM 浏览器差异
18.XML DOM – 遍历节点树
19.XML DOM – ProcessingInstruction 对象
20.XML DOM – DocumentType 对象
21.XML DOM – DocumentImplementation 对象
22.XML DOM – Document 对象
23.XML DOM – NamedNodeMap 对象
24.XML DOM – NodeList 对象
25.XML DOM – Node 对象
26.XML DOM – 节点类型
27.XML DOM – HttpRequest 对象
28.XML DOM – 克隆节点
29.XML DOM nodeType 属性
30.XML DOM nodeName 属性
31.XML DOM nextSibling 属性
32.XML DOM namespaceURI 属性
33.XML DOM localName 属性
34.XML DOM lastChild 属性
35.XML DOM firstChild 属性
36.XML DOM childNodes 属性
37.XML DOM baseURI 属性
38.XML DOM compareDocumentPosition() 方法
39.XML DOM cloneNode() 方法
40.XML DOM appendChild() 方法
41.XML DOM textContent 属性
42.XML DOM previousSibling 属性
43.XML DOM prefix 属性
44.XML DOM parentNode 属性
45.XML DOM ownerDocument 属性
46.XML DOM nodeValue 属性
47.XML DOM replaceChild() 方法
48.XML DOM removeChild() 方法
49.XML DOM lookupPrefix() 方法
50.XML DOM lookupNamespaceURI() 方法
51.XML DOM isSameNode() 方法
52.XML DOM isEqualNode() 方法
53.XML DOM insertBefore() 方法
54.XML DOM hasChildNodes() 方法
55.XML DOM hasAttributes() 方法
56.XML DOM childNodes 属性
57.XML DOM async 属性
58.XML DOM removeNamedItem() 方法
59.XML DOM item() 方法
60.XML DOM getNamedItem() 方法
61.XML DOM length 属性
62.XML DOM item() 方法
63.XML DOM length 属性
64.XML DOM nodeName 属性
65.XML DOM lastChild 属性
66.XML DOM inputEncoding 属性
67.XML DOM implementation 属性
68.XML DOM firstChild 属性
69.XML DOM documentURI 属性
70.XML DOM documentElement 属性
71.XML DOM doctype 属性
72.XML DOM xmlVersion 属性
73.XML DOM xmlStandalone 属性
74.XML DOM xmlEncoding 属性
75.XML DOM strictErrorChecking 属性
76.XML DOM nodeValue 属性
77.XML DOM nodeType 属性
78.XML DOM getElementsByTagNameNS() 方法
79.XML DOM getElementsByTagName() 方法
80.XML DOM createTextNode() 方法
81.XML DOM createElementNS() 方法
82.XML DOM createElement() 方法
83.XML DOM createComment() 方法
84.XML DOM createCDATASection() 方法
85.XML DOM – HttpRequest 对象
86.XML DOM – Comment 对象
87.XML DOM – CDATASection 对象
88.XML DOM – Text 对象
89.XML DOM – Attr 对象
90.XML DOM – Element 对象
91.XML DOM renameNode() 方法
92.XML DOM 解析器错误
93.XML DOM Parse Error 对象
94.XML DOM attributes 属性
95.XML DOM systemId 属性
96.XML DOM name 属性
97.XML DOM internalSubset 属性
98.XML DOM entities 属性
99.XML DOM ownerDocument 属性
100.XML DOM nodeType 属性