JavaScript 节点（node）知识

清疚 2023-07-17 02:51 33阅读 0赞

## 一、节点概念 ##

**DOM** : Document Object Model 文档对象模型

*  定义了访问和处理HTML文档的标准方法
 *  根据DOM，文档中每一个成分都是一个节点
 *  DOM节点
 *  整个文档是一个文档节点
 *  HTML标签是元素节点 包含在元素中的文本，叫文本节点 属性，属性节点 注释，注释节点

**节点级别：**

*  在节点树中，顶端对应的节点为根节点
 *  根节点以外的每一个节点都有一个父节点
 *  节点可以有任何数量的子节点
 *  叶子节点：没有子节点的节点是叶子节点
 *  同级节点拥有相同的父节点

## 二、节点的属性 ##

*  childNodes 返回节点的子节点列表

**例子：**

**运行结果**  
![在这里插入图片描述][20200319104524272.png]

> 结果长度为11，因为在代码中id为box的div到下面的div之间有空格，所以也占了1个长度，所以总共长度是11.

*  fristChild 返回节点的首个子节点

**例子**

**运行结果**

![在这里插入图片描述][20200319105550177.png]  
![在这里插入图片描述][20200319105612941.png]

*  lastChild 返回节点的最后一个子节点

**例子**

> css样式是一样的，这里就不写了，就写一下js代码

**运行结果**

![在这里插入图片描述][20200319110007397.png]  
![在这里插入图片描述][20200319110017675.png]

*  nextSibling 返回节点之后紧跟着的同级节点

**例子**

**运行结果**  
![在这里插入图片描述][20200319110416761.png]  
![在这里插入图片描述][20200319110427902.png]

*  previousSibling 返回节点之前紧跟着的同级节点

**例子**

**运行结果**  
![在这里插入图片描述][20200319110745247.png]  
![在这里插入图片描述][20200319110757868.png]

*  parentNode 返回节点的父级节点

**例子**

> 这里css样式只多加了一句，其他的同上。

body{ height: 200px;background: #2b542c;}
     	<script>
            function f() { 
                var box = document.getElementById("box");
                var parent = box.parentNode;
                parent.style.background="pink";
            }
        </script>
         <div id="box"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></div>
        <button onclick="f()">Parent</button>

**运行截图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 1]

*  textContent 返回节点及其后代节点的文本内容

**例子**

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 2]

[20200319104524272.png]: /images/20230528/ab457b78ac9c4103a683cf30f3aa1acb.png
[20200319105550177.png]: /images/20230528/6cecf3fd585d42e7ab096c9aa2b7d835.png
[20200319105612941.png]: /images/20230528/7270b745ead74562b3502f5c63f06c60.png
[20200319110007397.png]: /images/20230528/161f1b917ef64e14924236f20019c2b6.png
[20200319110017675.png]: /images/20230528/5298cb72114e44af8917c4fbdf4a8252.png
[20200319110416761.png]: /images/20230528/13db32c2e0614d14b4124b50cff45478.png
[20200319110427902.png]: /images/20230528/c5903784d62d4f969fb0c9ba26f1b28c.png
[20200319110745247.png]: /images/20230528/e0eeeee3a3be40339d9f0e4a371bdf2f.png
[20200319110757868.png]: /images/20230528/b7a39f7391d44c358210ebc25faabe56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: /images/20230528/732024e34f5d4858ad466aa4f91b82a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 1]: /images/20230528/ecd63e7b666d4dcb9f7dd26e366f8f73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 2]: /images/20230528/1c7414330f314632a10606ec3c1e47ff.png