第二十五章 DOM入门

JavaScript

DOM（文档对象模型）是一种旨在处理网页结构及其包含的数据的机制。通过使用 DOM，您可以读取网页中包含的文本和属性信息，定义加载网页或单击按钮时发生的情况，向网页添加新元素或从网页中删除元素. 你可以 在这里，我将解释如何从 JavaScript 使用 DOM。

目录

25-1 什么是DOM
25-2 通过指定id属性的值获取一个元素节点（getElementById）
25-3 通过指定class属性的值获取一个元素节点（getElementsByClassName）
25-4 通过指定name属性值获取元素节点（getElementsByName）
25-5 获取符合CSS选择器样式条件的元素节点（querySelector、querySelectorAll）
25-6 获取节点的子/父/兄弟节点
25-7 获取元素节点的子/父/兄弟元素的节点

25-1 什么是DOM

在查看具体如何使用 DOM 之前，我将简要说明 DOM 的基础知识，例如何时以及如何使用它。

DOMとは

DOM 代表文档对象模型，是一种用于处理 HTML 和 XML 文档的 API。DOM 以前由 W3C 标准机构标准化，现在由 WHATWG 标准化。

DOM Standard

正如文档对象模型的名称所暗示的那样，DOM 将 HTML 和 XML 文档中包含的元素以及元素中包含的文本数据视为对象。然后它将文档标识为对象的分层组合。而 DOM 提供了用于处理来自各种编程语言（例如 JavaScript）的对象的 API。

在 DOM 中，组成文档的对象称为“节点”。节点又分为“元素节点”、“文本节点”、“属性节点”等。

通过在网页中编写的JavaScript使用DOM，读取网页上的文本数据，添加新元素，并在点击网页上显示的按钮时进行预设处理。

DOM层次结构

DOM 将目标文档视为注释的层次结构。例如，让我们看一下下面的 HTML 页面：

<!DOCTYPE HTML>
<html>
<head>
<title>日记
</title>
</head>
<body>
<h1>散步</h1>
<p id="xxx">
我的名字是<strong>Yuhua</strong>出生在青岛市。
</p>
</body>
</html>

给定一个这样的 HTML 页面，DOM 将其视为一个分层文档树，如下所示：

最顶层的节点是文档节点。其他节点在此之下分层连接。元素节点表示 HTML 页面中的元素，文本节点表示元素中包含的文本。还有其他几种类型的节点，例如表示评论的评论节点。

虽然在这个 DOM 树中省略了，但实际上有一个空白节点。

空白节点

HTML页面中描述的空格、制表符、换行符等空白字符，在浏览器中显示HTML页面时，并不是原样显示，而是按照确定的规则被忽略并显示。例如，忽略紧跟在空格之后的所有空格，忽略元素前后的所有空格。

但是，在DOM中，如果元素之间有空格、制表符或换行符，则会被视为空白节点，所以要小心。

例如，查看以下两个 HTML 语句：

<div><p>AAA</p><p>BBB</p></div>
<div>
  <p>AAA</p>
  <p>BBB</p>
</div>

在浏览器中查看时，两者看起来完全一样。顺带一提，看DOM树的时候有以下区别。

p 元素前后的空格、换行符、制表符等连续的空白字符被视为一个空白节点。（空白节点是一种文本节点）。因此，即使在浏览器中显示时相同，节点也可能存在，也可能不存在，这取决于 HTML 页面的描述方式。

请注意，根据是否存在空白节点，处理可能会有所不同，例如在获取某个节点的所有子节点时，或者在获取同一层次结构中的节点的下一个节点时。

节点之间的关系

文档中的每个节点根据其在文档树中的位置具有父子关系和兄弟关系。

元素节点（body）是元素节点（h1）和元素节点（p）的父节点，元素节点（h1）和元素节点（p）是元素节点（body）的子节点。每个具有相同父节点的节点都成为兄弟节点。元素节点（h1）和元素节点（p）是兄弟节点。

在 DOM 中，您可以从特定节点获取和操作父节点和子节点。

使用 DOM 的简单示例

最后，我将发布一个使用简单 DOM 的示例。单击下面的按钮可更改按钮下方显示的文本。

点击上面的按钮，这里的句子会发生变化

DOM 和 JavaScript 的结合使得做这样的事情变得容易。

25-2 通过指定id属性的值获取一个元素节点（getElementById）

Document 对象的 getElementById 方法根据元素的 id 属性的值检索匹配的 Element 对象。本节介绍如何使用 getElementById 方法。

getElementById 的格式和用法

Document 对象的 getElementById 方法在给定 id 属性值的情况下检索元素节点。格式如下。

document.getElementById(id)

参数是一个具有 id 属性值的 DOMString 对象（例如’example’）。返回值是一个 Element 对象。如果找不到则返回 null。

比如获取id属性值为’example’的元素节点，写法如下。

let element = document.getElementById('example');

一个 HTML 页面中的多个元素的 id 属性值不能相同，因此通常只有一个元素节点具有给定的 id 属性值。如果同一个id属性值附加到多个元素节点，则获取第一个元素节点。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>getElementById TEST</title>
</head>
<body>

<p>我今天在外面吃午饭。</p>

<p id="place">山东省青岛市</p>
<p id="shopname">中华饭店</p>

<p>真好吃</p>

<button onClick="getElement();">要素を取得</button>

<script>
function getElement(){
    let element = document.getElementById('place');
    console.log('地点: ' + element.textContent);

    element = document.getElementById('shopname');
    console.log('点名: ' + element.textContent);
}
</script>
</body>
</html>

当点击显示的按钮时，获取HTML页面包含的id属性指定值的元素节点，获取元素节点包含的文本并显示在控制台上。

通过标签名获取元素节点（getElementsByTagName）

Document 对象的 getElementsByTagName 方法在给定元素标签名称的情况下检索所有匹配的元素节点。本节介绍如何使用 getElementsByTagName 方法。

getElementsByTagName 的格式和用法

Document对象的getElementsByTagName方法指定标签名（元素名），获取元素节点。格式如下。

document.getElementsByTagName(tagname)

将标记名称指定为 DOMString 对象（您可以将其视为字符串）作为参数（例如“div”或“p”）。’*’ 的标签名称将匹配所有元素。返回值是一个 HTMLCollection 对象。

HTMLCollection 对象是多个元素节点的集合。HTMLCollection 对象有一个 length 属性，一个 item 方法，和一个 namedItem 方法，可以用来获取获取的元素节点的个数和检索指定的元素节点，如下所示。

let elements = document.getElementsByTagName('p');

// 获取检索到的元素个数
let len = elements.length;

// 通过索引获取元素
let element = elements.item(0);

// 通过指定索引获取元素，格式如下
let element = elements[0];

// 通过指定ID属性或name属性获取元素
let element = elements.item('user');

具有相同标签名称的元素节点按照它们在 HTML 页面中出现的顺序进行索引。索引从 0 开始，依次为 1、2、3，依此类推。

getElementsByTagName 方法如果没有找到具有指定标签名称的元素节点，则不返回 null，它返回一个长度为 0 的 HTMLCollection 对象。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName TEST</title>
</head>
<body>

<p>水果清单</p>

<div>
<p>西瓜</p>
<p>樱桃</p>
</div>

<div>
<p>草莓</p>
<p>桔子</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let elements = document.getElementsByTagName('p');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

点击显示的按钮，获取HTML页面包含的p标签的所有元素节点，获取元素节点包含的文本并显示在控制台上。

获取元素节点仅限于特定元素的后代元素

getElementsByTagName 方法是为 Element 对象和 Document 对象提供的。因此，如果对特定的元素节点使用getElementsByTagName方法，则可以指定标签名称（元素名称），只为该元素节点的子元素节点或孙元素节点获取元素节点。格式如下。

element.getElementsByTagName(tagname)

参数是一个指定标签名称的 DOMString 对象（例如“div”或“p”）。’*’ 的标签名称将匹配所有元素。返回值是一个 HTMLCollection 对象。请注意，不包括起始元素节点本身。

例如，要获取id属性值为’example’的元素节点的后代中的p标签元素节点列表，写法如下。

let element = document.getElementById('example');
let elements = element.getElementsByTagName('p');

也可以合写为：

let elements = document.getElementById('example').getElementsByTagName('p');

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName TEST</title>
</head>
<body>

<p>水果清单</p>

<div id="summer">
<p>西瓜</p>
<p>樱桃</p>
</div>

<div id="winter">
<p>草莓</p>
<p>桔子</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let winter = document.getElementById('winter');
    let elements = winter.getElementsByTagName('p');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

当点击显示的按钮时，获取id属性值为winter的元素的后代元素中p标签的所有元素节点，并依次获取元素节点中包含的文本并显示在控制台上。

25-3 通过指定class属性的值获取一个元素节点（getElementsByClassName）

Document 对象的 getElementsByClassName 方法根据元素的类属性值检索所有匹配的元素节点。本节介绍如何使用 getElementsByClassName 方法。

getElementsByClassName 的格式和用法

Document 对象的 getElementsByClassName 方法在给定类属性值的情况下检索元素节点。格式如下。

document.getElementsByClassName(classnames)

参数是一个 DOMString 对象，它指定类属性的值（例如’box’）。可以指定多个类属性值，将检索匹配任意指定值的所有元素节点。在这种情况下，用空格分隔它们（例如，“框菜单”）。返回值是一个 HTMLCollection 对象。

HTMLCollection 对象是多个元素节点的集合。HTMLCollection 对象有一个 length 属性、一个 item 方法和一个 namedItem 方法，可用于获取获取元素的数量并检索指定元素，如下所示。

let elements = document.getElementsByClassName('box');

// 获取检索到的元素个数
let len = elements.length;

// 通过索引获取元素
let element = elements.item(0);

// 通过指定索引获取元素，格式如下
let element = elements[0];

具有相同类属性值的元素节点按照它们在 HTML 页面中出现的顺序进行索引。索引从 0 开始，依次为 1、2、3，依此类推。

如果没有找到具有指定类属性值的元素节点，getElementsByClassName 方法不会返回 null ，而是返回一个长度为 0 的 HTMLCollection 对象。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>日记</p>

<div class="box">
  <p>我今天在外面吃午饭</p>
  <p class="box">地址：青岛市市南区</p>
  <p class="box">店名：中华饭店</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let elements = document.getElementsByClassName('box');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        elements.item(i).style.border="3px solid #0000ff";
    }
}
</script>
</body>
</html>

当点击显示的按钮时，获取HTML页面中包含的class属性指定值的元素节点，改变元素的样式（边框颜色和粗细）。

由于为div元素和p元素设置了相同的class属性值，所以获取元素节点和改变样式的方式都是一样的。

获取元素节点仅限于特定元素的后代元素

getElementsByClassName 方法是为 Element 对象和 Document 对象提供的。因此，如果对特定元素使用 getElementsByClassName 方法，则可以通过指定 class 属性的值来获取元素节点，仅限于该元素的子元素或孙元素。格式如下。

element.getElementsByClassName(classnames)

参数是一个 DOMString 对象，它指定类属性的值（例如’box’）。可以指定多个类属性值，将检索匹配任意指定值的所有元素节点。在这种情况下，用空格分隔它们（例如，“框菜单”）。返回值是一个 HTMLCollection 对象。

例如，要获取id属性值为’example’的元素节点的后代中class属性值为’box’的元素节点列表，写法如下。

let element = document.getElementById('example');
let elements = element.getElementsByClassName('box');

也可以合写为：

let elements = document.getElementById('example').getElementsByClassName('box');

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div.box, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>日记</p>

<div class="box">
  <p>我今天在外面吃午饭</p>
  <div id="shopinfo">
       <p class="box">地址：青岛市市南区</p>
       <p class="box">店名：中华饭店</p>
  </div>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let element = document.getElementById('shopinfo');
    let elements = element.getElementsByClassName('box');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        elements.item(i).style.border="2px solid #0000ff";
    }
}
</script>
</body>
</html>

单击显示的按钮时，获取id属性值为shopinfo的元素节点的后代元素节点中class属性指定值的元素节点，并改变样式（边框颜色和粗细）。

25-4 通过指定name属性值获取元素节点（getElementsByName）

Document 对象的 getElementsByName 方法根据元素名称属性的值检索所有匹配的元素节点。本节介绍如何使用 getElementsByName 方法。

getElementsByName 的格式和用法

Document 对象的 getElementsByName 方法检索给定 name 属性值的元素节点。格式如下。

document.getElementsByName(name)

参数是一个包含 name 属性值的 DOMString 对象（例如’hobby’）。返回值是一个 NodeList 对象。

NodeList 对象是多个元素节点的集合。NodeList对象有length属性和item方法，可以获取获取的元素节点个数，获取指定元素节点如下。

let elements = document.getElementsByName('hobby');

// 获取检索到的元素
let len = elements.length;

// 通过索引获取元素
let element = elements.item(0);

// 通过指定索引获取元素，格式如下
let element = elements[0];

具有相同名称属性值的元素节点按照它们在 HTML 页面中出现的顺序进行索引。索引从 0 开始，依次为 1、2、3，依此类推。

如果没有找到具有指定名称属性值的元素节点，则 getElementsByName 方法返回一个长度为 0 的 NodeList 对象，而不是 null 。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body>

<p>选择一个爱好</p>

<label><input type="radio" name="hobby" value="Sports">Sports</label>
<label><input type="radio" name="hobby" value="Music" checked>Music</label>
<label><input type="radio" name="hobby" value="Travel">Travel</label>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let elements = document.getElementsByName('hobby');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        if (elements.item(i).checked){
            console.log(elements.item(i).value + ' is checked');
        }else{
            console.log(elements.item(i).value + ' is not checked');
        }
    }
}
</script>
</body>
</html>

当点击显示的按钮时，获取HTML页面包含的name属性指定值的元素节点，获取元素节点包含的单选按钮信息，并显示在控制台上。

25-5 获取符合CSS选择器样式条件的元素节点（querySelector、querySelectorAll）

Document 对象的 querySelector 和 querySelectorAll 方法通过以 CSS 选择器的形式指定条件来检索匹配的元素节点。您可以指定任何内容，从简单的事情（如指定 id 元素）到组合条件的复杂事情。本节介绍如何使用 querySelector 方法和 querySelectorAll 方法。

querySelector和querySelectorAll的格式和使用

Document 对象的 querySelector 方法通过以 CSS 选择器的形式指定条件来检索元素节点。格式如下。

document.querySelector(selectors)

对于参数，将 CSS 选择器格式的值指定为 DOMString 对象。（稍后会详细介绍 CSS 选择器）。返回值是一个 Element 对象。querySelector 方法返回单个元素节点，因此如果多个元素符合条件，它将返回第一个元素节点。如果找不到则返回 null。

Document 对象的 querySelectorAll 方法通过以 CSS 选择器的形式指定条件来检索元素节点。格式如下。

document.querySelectorAll(selectors)

对于参数，将 CSS 选择器格式的值指定为 DOMString 对象。（稍后会详细介绍 CSS 选择器）。返回值是一个包含一个或多个元素的 NodeList 对象。返回所有匹配的节点。如果找不到，则返回一个长度为 0 的 NodeList 对象。

Element 对象表示单个元素节点，而 NodeList 对象是多个元素节点的集合。NodeList 对象有一个 length 属性和一个 item 方法，允许您获取检索到的节点数并检索检索到的节点，如下所示：

let elements = document.querySelectorAll('.box');

// 获取检索到的元素个数
let len = elements.length;

// 通过索引获取元素
let element = elements.item(0);

// 通过指定索引获取元素，格式如下
let element = elements[0];

匹配相同 CSS 选择器的元素节点按照它们在 HTML 页面中出现的顺序被索引。索引从 0 开始，依次为 1、2、3，依此类推。

CSS 选择器的类型以及如何指定它们

CSS（级联样式表）选择器是一种格式，用于指定应为 HTML 页面设置样式的元素。querySelector 和 querySelectorAll 方法使用相同的格式来描述在 HTML 文件中检索元素的条件。

让我们来看看如何指定主要的 CSS 选择器。

定位所有元素 (*)

写入 * 以所有元素节点为目标。

let elements = document.querySelectorAll('*');
<div>
  <p>你好</p>
</div>

<div>
  <p>再见</p>
</div>

指定标签名称

指定 p、div、h1 等标签名时，请原样写入标签名。获取描述标签的元素节点。下面获取tag为div的元素节点。

let elements = document.querySelectorAll('div');
<div>
  <p>你好</p>
</div>

<div>
  <p>再见</p>
</div>

指定 id 属性的值 (#id)

要指定为元素设置的 id 属性的值，请编写#value。获取具有指定 id 属性值的元素节点。下面获取id属性值为main的元素节点。

let elements = document.querySelectorAll('main');
<div id="main">
  <p>你好</p>
</div>

<div>
  <p>再见</p>
</div>

指定类属性的值（.class）

要指定为元素设置的类属性的值，请编写 .value。获取具有指定类属性值的元素节点。下面获取class属性值为box的元素节点。

let elements = document.querySelectorAll('box');
<div class="box">
  <p>你好</p>
</div>

<div>
  <p class="box">再见</p>
</div>

要将类属性的值指定为特定标签的元素，请编写标签名称.值。下面获取tag为div的元素节点中class属性值为box的元素节点。

let elements = document.querySelectorAll('p.box');
<div class="box">
  <p>你好</p>
</div>

<div>
  <p class="box">再见</p>
</div>

匹配任意多个选择器 (ABC)

通过用逗号（,）分隔选择器，您可以获得与多个选择器中的至少一个匹配的元素节点。下面获取id属性值为main或者class属性值为box的元素节点。

let elements = document.querySelectorAll('#main,.box');
<div id="main">
  <p>你好</p>
</div>

<div>
  <p class="box">再见</p>
</div>

在匹配 A 的选择器 (AB) 的元素的后代元素中匹配 B 的选择器

通过编写由空格分隔的选择器，您可以在与第一个选择器匹配的元素的后代元素中获得与下一个选择器匹配的元素节点。如果有三个或更多选择器，则以相同的方式搜索后代元素。下面获取id属性值为main的元素的子元素或孙元素中标记为p的元素节点。

let elements = document.querySelectorAll('#main p');
<div id="main">
  <p class="box">你好</p>
  <div>
    <p class="box">天气不错</p>
  </div>
</div>

<div id="sub">
  <p class="box">再见</p>
</div>

在匹配 A 的选择器 (A > B) 的元素的子元素中匹配 B 的选择器

通过用 > 分隔选择器，获取与第一个选择器匹配的元素的子元素中与下一个选择器匹配的元素节点。如果以空格分隔，则子元素和孙元素被定位，但如果以 > 分隔，则仅以子元素为目标。下面获取id属性值为main的元素的子元素中标签为p的元素节点。

let elements = document.querySelectorAll('#main > p');
<div id="main">
  <p class="box">你好</p>
  <div>
    <p class="box">天气不错</p>
  </div>
</div>

<div id="sub">
  <p class="box">再见</p>
</div>

在匹配 A 的选择器 (A[B]) 的元素中匹配属性值为 B 的元素

获取与选择器匹配的元素节点中具有指定属性的元素节点。下面获取标签为p的元素节点中style属性值为的元素节点。

let elements = document.querySelectorAll('p[style]');
<div">
  <p style="font-size:10px;">你好</p>
</div>

<div">
  <p style="color:#fff;">再见</p>
</div>

在匹配A的选择器的元素中，属性值B的值匹配带有C的元素(A[B=”C”])

获取与选择器匹配的元素节点中指定属性设置为指定值的元素节点。下面获取tag为p的元素节点中style属性值为’color:#fff;’的元素节点。

let elements = document.querySelectorAll('p[style="color:#fff;"]');
<div">
  <p style="font-size:10px;">你好</p>
</div>

<div">
  <p style="color:#fff;">再见</p>
</div>

查询选择器示例

使用 querySelector 方法尝试示例。querySelector 方法检索单个元素节点或与条件匹配的第一个元素节点。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>querySelector TEST</title>
</head>
<body>

<p>我去吃午饭了。</p>

<div class="shop">
<p id="place">山东省青岛市</p>
<p id="shopname">中华饭店</p>
</div>

<p>味道很好</p>

<button onClick="getElement();">获取元素</button>

<script>
function getElement(){
    element = document.querySelector('#shopname');
    console.log('Text: ' + element.textContent);
}
</script>
</body>
</html>

当点击显示的按钮时，获取HTML页面包含的id属性指定值的元素节点，并将元素节点包含的文本输出到控制台。

querySelectorAll 示例

使用 querySelectorAll 方法尝试示例。querySelectorAll 方法检索所有符合条件的元素节点。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>querySelectorAll TEST</title>
</head>
<body>

<p>我去吃午饭了。</p>

<div class="shop">
<p>山东省青岛市</p>
<p>中华饭店</p>
</div>

<p>味道很好</p>

<button onClick="getElement();">获取元素</button>

<script>
function getElement(){
    elements = document.querySelectorAll('.shop p');

    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log('Text: ' + elements.item(i).textContent);
    }
}
</script>
</body>
</html>

当点击显示的按钮时，获取HTML页面中包含的具有class属性指定值的元素的后代元素中标签为p的元素节点，并将该元素的文本输出到控制台。

25-6 获取节点的子/父/兄弟节点

HTML页面中包含的节点具有层次结构，对于其中的某个特定节点，有高一级的父节点、低一级的子节点和同级的兄弟节点。但是，这些节点可以通过引用Node对象提供的各种属性来获取。在这里，我们将解释如何使用 Node 对象的属性获取特定节点的子节点、父节点和兄弟节点。

获取所有子节点

使用Document对象的getElementById方法或querySelector方法获取元素节点后，可以通过引用Node对象的childNodes属性获取该节点下一级的所有子节点。。格式如下。

node.childNodes

此属性仅供参考。返回一个 NodeList 对象作为返回值。

NodeList 对象是节点的集合。NodeList 对象有一个 length 属性和一个 item 方法，允许您获取检索到的节点数并检索检索到的节点，如下所示：

let element = document.getElementById('main');
let children = element.childNodes;

// 获取检索到的节点数
let len = children.length;

// 通过索引获取节点对象
let element = children.item(0);

// 通过指定索引获取一个Node对象，格式如下
let element = children[0];

多个子节点按照它们在 HTML 页面中出现的顺序进行索引。索引从 0 开始，依次为 1、2、3，依此类推。如果没有找到子节点，则 childNodes 属性返回一个长度为 0 的 NodeList 对象。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>childNodes</title>
</head>
<body>

<p>我今天在外面吃午饭</p>

<div id="box">
    <p>地址：山东省青岛市</p>
    <p>店名：中华饭店</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    let children = element.childNodes;

    let len = children.length;
    console.log("节点数:" + len);

    for (let i = 0; i < len; i++){
        console.log(children.item(i).nodeName);
    }
}
</script>
</body>
</html>

当你点击显示的按钮时，你会得到id属性值为box的节点和该节点的所有子节点。然后它打印子节点的数量和每个节点的节点名称。

一个 id 属性值为 box 的 div 元素只包含两个 p 元素，但如“空白节点 这次也是，因为p元素前后都有空白节点，所以一共有5个子节点。

获取第一个子节点和最后一个子节点

通过引用Node对象的firstChild属性，可以得到该节点下一级子节点中的第一个节点。格式如下。

node.firstChild

此属性仅供参考。返回一个 Node 对象作为返回值。如果没有子节点，则返回 null。

通过引用Node对象的lastChild属性，可以得到该节点下一级子节点中的最后一个节点。格式如下。

node.lastChild

此属性仅供参考。返回一个 Node 对象作为返回值。如果没有子节点，则返回 null。

例如，要获取特定节点的第一个和最后一个子节点，请编写：

let element = document.getElementById('main');
let first = element.firstChild;
let last = element.lastChild;

获取同一层次结构中的下一个和上一个节点

您可以通过引用 Node 对象的 nextSibling 属性来获取与该节点处于同一层次结构中的下一个节点。格式如下。

node.nextSibling

此属性仅供参考。返回一个 Node 对象作为返回值。如果没有子节点，则返回 null。

您可以通过引用 Node 对象的 previousSibling 属性来获取与该节点在同一层次结构中的前一个节点。格式如下。

node.previousSibling

此属性仅供参考。返回一个 Node 对象作为返回值。如果没有子节点，则返回 null。

例如，要获取特定节点同一层级的下一个节点和上一个节点，写法如下。

let element = document.getElementById('main');
let next = element.nextSibling;
let prev = element.previousSibling;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>nextSibling,previousSibling</title>
</head>
<body>

<p>我今天在外面吃午饭</p>

<div id="box">
	<!-- 商店信息 -->
    <p>地址：山东省青岛市</p>
    <p>店名：中华饭店</p>
</div>

<button onClick="getElements(1);">获取元素（从前到后）</button>
<button onClick="getElements(2);">获取元素（从后往前）</button>

<script>
function getElements(direct){
    let element = document.getElementById('box');

    if (direct == 1){
        let child = element.firstChild;

        while (child){
            console.log(child.nodeName);
            child = child.nextSibling;
        }
    }else{
        let child = element.lastChild;

        while (child){
            console.log(child.nodeName);
            child = child.previousSibling;
        }
    }
}
</script>
</body>
</html>

点击显示的按钮会得到id属性值为box的元素节点，然后是该元素节点的第一个子节点。然后，按照从前到后的顺序获取同一层级的节点。获取的节点正在输出节点的名称。

另外，如果点击显示的按钮（从后往前），在获取到id属性值为box的元素节点后，获取该元素节点的最后一个子节点。然后，按照从后到前的顺序获取同一层级的节点。获取的节点正在输出节点的名称。

获取父节点

可以通过引用 Node 对象的 parentNode 属性来获取该节点的父节点。格式如下。

node.parentNode

此属性仅供参考。返回一个 Node 对象作为返回值。如果获取文档节点的父节点，则返回 null。

例如，要获取特定节点的父节点，写：

let element = document.getElementById('main');
let parent = element.parentNode;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>parentNode</title>
</head>
<body>

<p>我今天在外面吃午饭</p>

<div>
	<!-- 商店信息 -->
    <p>地址：青岛市市南区</p>
    <p id="shop">店名：中华饭店</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(direct){
    let element = document.getElementById('shop');

    let parent = element.parentNode;

    while (parent){
        console.log(parent.nodeName);
        parent = parent.parentNode;
    }
}
</script>
</body>
</html>

当点击显示的按钮时，获取id属性值为shop的元素节点，然后依次获取父节点。获取的节点正在输出节点的名称。

我解释了如何使用 Node 对象的属性从特定节点获取子节点、父节点和兄弟节点。

25-7 获取元素节点的子/父/兄弟元素的节点

获取子节点列表等时，获取到的节点包括元素节点、文本节点、注释节点等各种类型的节点，但有时只需要元素节点即可。在那种情况下，使用属性为特定元素节点仅获取同一层次结构中的子元素、父元素和兄弟元素会很方便。这里我们将解释如何获取从特定元素节点看到的子元素、父元素和兄弟元素节点。

获取所有子元素

使用Document对象的getElementById方法或querySelector方法获取元素节点后，再参考ParentNode对象的children属性获取该元素节点下一级的所有子元素节点，我可以。格式如下。

node.children

此属性仅供参考。返回一个 HTMLCollection 对象作为返回值。

HTMLCollection 对象是多个元素节点的集合。HTMLCollection 对象有一个length 属性和一个item 方法，您可以通过如下方式获取获取的元素节点的个数或获取指定的元素节点。

let element = document.getElementById('main');
let echildren = element.children;

// 获取检索到的元素个数
let len = echildren.length;

// 通过索引获取元素
let element = echildren.item(0);

// 通过指定索引获取元素，格式如下
let element = echildren[0];

如果有多个子元素，它们将按照它们在 HTML 页面中出现的顺序进行索引。索引从 0 开始，依次为 1、2、3，依此类推。如果没有找到子元素，则 children 属性返回一个长度为 0 的 HTMLCollection 对象。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>childNodes</title>
</head>
<body>

<p>我今天在外面吃午饭</p>

<div id="box">
    <p>地址：青岛市市南区</p>
    <p>店名：中华饭店</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    let echildren = element.children;

    let len = echildren.length;
    console.log("元素个数:" + len);

    for (let i = 0; i < len; i++){
        console.log(echildren.item(i).textContent);
    }
}
</script>
</body>
</html>

当点击显示的按钮时，会得到id属性值为box的元素节点和该元素的所有子元素节点。之后，我们输出子元素节点的数量和每个节点的节点文本。

如果获取所有的子节点，根据HTML的写法，可能会包含空白节点，但是这次只获取子元素节点，所以不包含文本节点。

获取第一个和最后一个子元素

通过引用ParentNode对象的firstElementChild属性，可以得到该节点下一级的子元素节点中的第一个元素。格式如下。

node.firstElementChild

此属性仅供参考。返回一个 Element 对象作为返回值。如果没有子元素，则返回 null。

通过引用ParentNode对象的lastElementChild属性，可以得到该节点下一级子元素节点中的最后一个元素。格式如下。

node.lastElementChild

此属性仅供参考。返回一个 Element 对象作为返回值。如果没有子节点，则返回 null。

例如，要获取特定节点的子元素节点中的第一个和最后一个子元素节点，写法如下。

let element = document.getElementById('main');
let efirst = element.firstElementChild;
let elast = element.lastElementChild;

获取同一层次结构中的下一个和上一个元素节点

通过引用 NonDocumentTypeChildNode 对象的 nextElementSibling 属性，可以获得与该元素节点处于同一层级的下一个元素节点。格式如下。

node.nextElementSibling

此属性仅供参考。返回一个 Element 对象作为返回值。如果没有子元素，则返回 null。

通过引用 NonDocumentTypeChildNode 对象的 previousElementSibling 属性，可以得到与本元素节点同层级的前一个元素节点。格式如下。

node.previousElementSibling

此属性仅供参考。返回一个 Node 对象作为返回值。如果没有子节点，则返回 null。

例如，要获取特定节点同一层级的下一个节点和上一个节点，写法如下。

let element = document.getElementById('main');
let enext = element.nextElementSibling;
let eprev = element.previousElementSibling;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>nextElementSibling</title>
</head>
<body>

<p>我今天在外面吃午饭</p>

<div id="box">
    <p>日期：2022年10月22日</p>
	<!-- 商店信息 -->
    <p>地址：山东省青岛市</p>
    <p>店名：中华饭店</p>
</div>

<button onClick="getElements(1);">获取元素（从前到后）</button>
<button onClick="getElements(2);">获取元素（从后往前）</button>

<script>
function getElements(direct){
    let element = document.getElementById('box');

    if (direct == 1){
        let echild = element.firstElementChild;
        while (echild){
            console.log(echild.textContent);
            echild = echild.nextElementSibling;
        }
    }else{
        let echild = element.lastElementChild;
        while (echild){
            console.log(echild.textContent);
            echild = echild.previousElementSibling;
        }
    }
}
</script>
</body>
</html>

点击显示的按钮会得到id属性值为box的元素节点，然后是第一个子元素的节点。然后从前到后依次获取同一层级的元素节点。检索到的元素节点正在输出元素的文本。

另外，如果点击显示的按钮（从后往前），在得到id属性值为box的元素节点后，得到最后一个子元素的节点。然后从后往前依次获取同一层级的元素节点。检索到的元素节点正在输出元素的文本。

获取父元素的节点

可以通过引用 Node 对象的 parentElement 属性来获取该节点父元素的节点。格式如下。

node.parentElement

此属性仅供参考。返回一个 Element 对象作为返回值。如果获取文档节点的父节点，则返回 null。

例如，要获取特定节点的父元素的节点，写法如下。

let element = document.getElementById('main');
let eparent = element.parentElement;

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>parentElement</title>
</head>
<body>

<p>我今天在外面吃午饭</p>

<div>
	<!--商店信息 -->
    <p>地址：山东省青岛市</p>
    <p id="shop">店名：中华饭店</p>
</div>

<button onClick="getElements();">获取元素</button>

<script>
function getElements(direct){
    let element = document.getElementById('shop');

    let eparent = element.parentElement;

    while (eparent){
        console.log(eparent.nodeName);
        eparent = eparent.parentElement;
    }
}
</script>
</body>
</html>

当点击显示的按钮时，获取id属性值为shop的元素节点，然后依次获取父元素节点。获取的节点正在输出节点的名称。

关联内容

JavaScript
第二章将JavaScript写到HTML编码中
JavaScript
第一章 在浏览器中启用 JavaScript
JavaScript
第三章 JavaScript 基础知识
JavaScript
第四章 JavaScript的数值
JavaScript
第五章 長整数
JavaScript
第六章 字符串的基础