HTML DOM 导航

最新推荐文章于 2021-08-04 16:58:43 发布

冷月醉雪

最新推荐文章于 2021-08-04 16:58:43 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML DOM 文章标签： HTML DOM 导航

本文链接：https://blog.youkuaiyun.com/lengyuezuixue/article/details/80282621

HTML DOM 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用HTML DOM API进行节点操作，包括获取节点列表、导航节点关系及访问节点内容等。通过实例展示了getElementsByTagName、length、parentNode、firstChild、lastChild、document.body等属性的应用。

HTML DOM 节点列表

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>Hello World!</p>
<p>DOM 是非常有用的!</p>

<script>
x=document.getElementsByTagName("p");
document.write("第二个段落的 innerHTML 内容为: " + x[1].innerHTML);
</script>

</body>
</html>

HTML DOM 节点列表长度

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>Hello World!</p>
<p>DOM 是非常有用的!</p>
<p>这个实例演示了 <b>length</b> 属性。</p>

<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{ 
    document.write(x[i].innerHTML);
    document.write("<br>");
}
</script>
</body>
</html>

导航节点关系

你能够使用三个节点属性：parentNode、firstChild以及lastChild，在文档结构中进行导航。

<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 属性可用于访问元素的文本：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

DOM 根节点

这里有两个特殊的属性，可以访问全部文档：

·document.documentElement - 全部文档

·document.body - 文档的主体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

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

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

childNodes 和 nodeValue

除了innerHTML属性，你也可以使用 childNodes 和 nodeValue属性来获取元素的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="intro">Hello World!</p>

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

</body>
</html>

参考：

https://www.yuque.com/docs/share/0d2ae6a6-4cf9-45c7-9432-f5f736ef56a2