JavaScript之DOM对象（Node结点属性、导航属性、页面查找）

╰+哭是因爲堅強的太久メ 2023-03-13 02:33 46阅读 0赞

### 文章目录 ###

*   *   *   *  DOM与Node节点
             *  自身属性
             *  导航属性
             *  页面查找

#### DOM与Node节点 ####

**1、DOM的概念**  
DOM 是 W3C（万维网联盟）的标准，DOM 定义了访问 HTML 和 XML 文档的标准。

W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

**2、DOM的分类**

*  核心 DOM ： 针对任何结构化文档的标准模型
 *  XML DOM ： 针对 XML 文档的标准模型，定义了所有 XML 元素的对象和属性，以及访问它们的方法。
 *  HTML DOM ：针对 HTML 文档的标准模型，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

**3、DOM节点**  
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

*  整个文档是一个文档节点(document对象)
 *  每个 HTML 元素是元素节点(element 对象)
 *  HTML 元素内的文本是文本节点(text对象)
 *  每个 HTML 属性是属性节点(attribute对象)
 *  注释是注释节点(comment对象)

**4、DOM节点关系图**  
![1][]

#### 自身属性 ####

**1、属性**

*  attributes - 节点（元素）的属性节点
 *  nodeType – 节点类型
 *  nodeValue – 节点值
 *  nodeName – 节点名称
 *  innerHTML - 节点的文本值（显示在页面上的内容）

**2、测试代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="div1">DIV1文本
        <p name="p_label"  class="p1">P文本</p>
        <div class="div2">DIV2文本
            <div div3>DIV3文本</div>
            <a href="">A文本</a>
        </div>
    </div>
    
    <script>
        var ele=document.getElementsByClassName("p1")[0];  //获取所有class为p1的元素，0表示第一个元素名
    
        //自身节点属性
        console.log(ele);
        console.log(ele.nodeName);  //元素名
        console.log(ele.nodeType);  //元素格式
        console.log(ele.nodeValue);  //元素值
        console.log(ele.innerHTML);  //在控制台显示节点内容
        ele.innerHTML="Hello JavaScript";  //改变节点的内容（显示在html页面上的内容）
    </script>
    </body>
    </html>

**3、测试结果：**  
![2][]

#### 导航属性 ####

**1、属性**

*  parentNode - 节点（元素）的父节点 (推荐多用)
 *  firstChild – 节点下第一个子元素
 *  lastChild – 节点下最后一个子元素
 *  childNodes - 节点（元素）的子节点

**2、测试代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="div1">DIV1文本
        <p name="p_label"  class="p1">P文本</p>
        <div class="div2">DIV2文本
            <div div3>DIV3文本</div>
            <a href="">A文本</a>
        </div>
    </div>
    
    <script>
    
        var ele=document.getElementsByClassName("p1")[0];  //获取所有class为p1的元素，0表示第一个元素名
    
    	//导航属性
        var a_ele=ele.parentNode;  //获取一个新的element对象
        console.log(a_ele.nodeName);
    
        var b_ele=ele.nextSibling;
        console.log(b_ele.nextSibling);
    
        var c_ele=ele.nextElementSibling;
        console.log(c_ele.nodeName);
        console.log(c_ele.innerHTML);
    
        var ele2=document.getElementsByClassName("div1")[0];
        console.log(ele2.children);
        console.log(ele2.children[1].children);  //获取div1下的第二个元素（div2）的children，即div3和a标签
        
    </script>
    </body>
    </html>

**3、测试结果：**  
![3][]

#### 页面查找 ####

**1、各节点的层级关系**  
![4][]

**2、页面查找方法**  
1）全局查找标签

*  使用 document.getElementById() 方法
 *  使用 document.getElementsByTagName() 方法
 *  使用 document.getElementsByClassName() 方法
 *  使用 document.getElementsByName() 方法

2）标签内查找标签

*  element.getElementsByTagName()
 *  element.getElementsByClassName()

**3、测试代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="div1">DIV1文本
        <p name="p_label"  class="p1">P文本</p>
        <div class="div2">DIV2文本
            <div div3>DIV3文本</div>
            <a href="">A文本</a>
        </div>
    </div>
    
    <script>
        var ele=document.getElementsByClassName("p1")[0];  //获取所有class为p1的元素，0表示第一个元素名
        
        //获取p标签的“兄弟姐妹”
        var ele3=document.getElementsByName("p_label")[0];
        // console.log(ele3); //获取p标签
        a_ele3=ele3.nextElementSibling
        console.log(a_ele3.innerHTML);
        console.log(a_ele3.innerText);  //获取标签内文本
        a_ele3.innerHTML="<h1>替换内容！</h1>";
    
    </script>
    </body>
    </html>

**4、测试结果**  
![5][]

[1]: /images/20230312/d3893a56d95d4216baa04f96df90b3e5.png
[2]: /images/20230312/0a8350239182457584f4ec1d0fe6c357.png
[3]: /images/20230312/3cee84a8f4d642ff8af186a0bab923f2.png
[4]: /images/20230312/e720ea41170343fbbcdad2c167be77ad.png
[5]: /images/20230312/b9c27e3961ea42a7aef5beda0a507de6.png