使用 HTML DOM,您可以使用 Node 来导航节点树 关系。
根据 W3C HTML DOM 标准,HTML 文档中的所有内容都是一个节点:
整个文档就是一个文档节点
每个 HTML 元素都是一个元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性都是一个属性节点(已弃用)
所有评论都是评论节点
使用 HTML DOM,节点树中的所有节点都可以通过 JavaScript 访问。
可以创建新节点,并且所有 节点可以修改或删除。
节点树中的节点相互之间具有层次关系。
术语“父母”、“孩子”和“兄弟姐妹”用于描述这种关系。
在节点树中,顶部节点称为根(或根节点)
每个节点只有一个父节点,除了根节点(没有父节点)
一个节点可以有多个子节点
兄弟姐妹(兄弟或姐妹)是具有相同父节点的节点
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 你可以读到:
<html>
是根节点
<html>
没有父级
<html>
是 <head>
和 < 的父级正文>
<head>
是 <html>
的第一个子元素
<body>
是 <html>
的最后一个子级
和 :
<head>
有一个子级:<title>
<title>
有一个子节点(文本节点):“DOM 教程”
<body>
有两个子级:<h1>
和 < p>
<h1>
有一个子项:“DOM Lesson one”
<p>
有一个孩子:“Hello world!”
<h1>
和 <p>
是兄弟姐妹
您可以使用以下节点属性在节点之间导航: JavaScript:
父节点
childNodes[节点编号]
第一个孩子
lastChild
nextSibling
上一个兄弟姐妹
DOM 处理中的一个常见错误是期望元素节点包含文本。
<title
id="demo">DOM Tutorial</title>
元素节点 <title>
(在上面的示例中)不包含文本。
它包含一个值为“DOM Tutorial”的文本节点。
文本节点的值可以通过节点的 innerHTML
属性访问:
myTitle = document.getElementById("demo").innerHTML;
访问innerHTML属性与访问nodeValue
相同 第一个孩子的:
myTitle = document.getElementById("demo").firstChild.nodeValue;
访问第一个孩子也可以这样完成:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
以下所有 (3) 个示例都会检索 <h1>
元素的文本并复制它 进入 <p>
元素:
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
在本教程中,我们使用innerHTML属性来检索 HTML 元素。
然而,学习 上面的其他方法对于理解树结构和 DOM 的导航。
有两个特殊属性允许访问完整文档:
document.body
- 文档的正文
document.documentElement
- 完整文档
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
nodeName
属性指定节点的名称。
节点名称是只读的
元素节点的nodeName与标签名相同
属性节点的nodeName是属性名称
文本节点的nodeName始终是#text
文档节点的nodeName始终是#document
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
</body>
</html>
注意: nodeName
始终包含 HTML 元素的大写标签名称。
nodeValue
属性指定节点的值。
元素节点的 nodeValue 为 null
文本节点的 nodeValue 是文本本身
属性节点的nodeValue是属性值
nodeType
属性是只读的。它返回节点的类型。
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
</body>
</html>
最重要的 nodeType 属性是:
Node | Type | Example |
---|---|---|
ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
TEXT_NODE | 3 | W3Schools |
COMMENT_NODE | 8 | <!-- This is a comment --> |
DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
类型 2 在 HTML DOM 中已被弃用(但可以使用)。它在 XML DOM 中并未被弃用。