526互联

DOM

发布时间 2023-12-25 11:47:34作者: 和哗

DOM概述

DOM（document object model）是文档对象模型，它为开发者提供了操作HTML元素和文档节点的属性和方法，方便开发者使用这些属性和方法开发出功能更强大的网页。

认识DOM

在DOM中，一个HTML文档是一个树状结构，HTML文档中的元素、属性、文本等不同的内容在内存中转换为DOM树种向对应类型的节点（node）。

 常见的节点类别

（1）根节点：<html>是整个HTML节点的根节点，一个HTML文档仅有一个html元素。

（2）父节点：父节点为某个节点的上级节点，如<head>为<meta>和<title>的父节点。

（3）子节点：子节点为某个元素节点的下级节点，如<head>和<body>为<html>的子节点，通常一个为HTML文档仅有一个<head>和一个<body>。

（4）兄弟节点：兄弟节点为拥有同一个父节点的节点，如<h1>和<div>为兄弟节点。

（5）叶节点：叶节点为无子节点的节点，如文本节点Hello。

HTML元素操作

在日常开发种，经常需要对HTML文档元素进行操作，包括获取元素，以及操作元素的内容，样式，属性等

1. 获取元素

在JavaScript中，通常使用document对象中的方法来获取HTML文档中的元素。

document对象获取元素的方法：

举个例子：（提供部分代码）

<div id="hello">hello</div> 
<a name="link">链接</a> 
<p>title</p> 
<p class="tom">tom</p> 
<script> 
     // 通过 id 属性值 hello 获取对应元素
     console.log(document.getElementById("hello")); 
     // 通过 name 属性值 link 获取所有元素
     console.log(document.getElementsByName("link")); 
     // 通过标签名 p 获取所有元素
     console.log(document.getElementsByTagName("p")); 
     // 通过类名 tom 获取所有元素
     console.log(document.getElementsByClassName("tom")); 
</script>

注意：

其中，getElementById()返回一个元素，getElementsByName()返回了NodeList对象，getElementsByTagName()和getElementsByClassName()都返回HTMLCollection对象。

NodeList 对象和 HTMLCollection 对象都属于类数组。类数组的取值方式同数组一样，可以从下标0 开始获取，同时可以通过 length  属性获取该对象的长度。

举个例子：

// 获取第 1 个 name 属性值为 link 的元素
var elm1 = document.getElementsByTagName("link")[0]; 
// 获取第 2 个标签名为 p 的元素
var elm2 = document.getElementsByTagName("p")[1]; 
// 获取第 1 个类名为 tom 的元素
var elm3 = document.getElementsByClassName("tom")[0];

 

2. 操作元素内容

在日常开发中，经常需要获取和修改某个元素的内容，DOM提供一些属性和方法来操作元素内容。

 举个例子：

 

<div id="content">
　　<span>DOM，</span> <span>全称为 document object model。</span> <a href="#">这是个链接</a>
　　 <script>var x = 1;</script>
</div>
<script> 
     //通过 id 属性值 content 获取对应元素 div 
     var a = document.getElementById("content"); 
     //通过标签名 span 获取所有元素，共两个
     var b = document.getElementsByTagName("span"); 
     //通过标签名 a 获取所有元素，共一个
     var c = document.getElementsByTagName("a"); 
     //在控制台输出指定元素 div 内去除所有标签和样式的文本内容
     console.log(a.innerText); 
     //在控制台输出指定元素 div 开始和结束标签之间的 HTML 内容
     console.log(a.innerHTML);
        //在控制台输出指定元素 div 的文本内容
        console.log(a.textContent); 
     //设置第一个 span 元素去除所有标签和样式的文本内容
     b[0].innerText = "DOM 的全称为 document object model，"; 
     //设置第二个 span 元素的文本内容 
     b[1].textContent = "是指文档对象模型。"; 
     //设置第一个 a 元素开始和结束标签之间的 HTML 内容
     c[0].innerHTML = "<p>点击链接查看详情</p>"; 
     console.log(b[0].innerText); 
     console.log(b[1].textContent); 
     console.log(c[0].innerHTML); 
</script>

 

效果展示：

控制台：

 

 

注意innerHTML和innerText的区别：

innerHTML获取的内容包括元素里面的所有标签，属性和文本内容。

innerText获取的内容只有元素里面的文本内容。

3. 操作元素样式

为了满足用户对于美观度的需要，DOM 提供了两种操作元素样式的方式，分别是通过 style 属性和class 属性进行操作。

（1）通过 style 属性操作元素样式。 CSS样式中的单词之间是以 “-” 间隔的，而通过DOM 设置的 style 属性是以驼峰式命名。

下面是部分样式的属性：

举个例子：

<head> 
     <meta charset="utf-8"> 
     <title>例 11-3</title> 
     <style> 
         .big { font-size: 28px;} 
         .green { color: green;} 
         .red { color: red;} 
     </style> 
</head> 
<body> 
     <div id="content" class="big">操作元素样式</div> 
     <script> 
         // 获取 id 属性值为 content 的对应元素 div 
         var a = document.getElementById("content"); 
         // 通过 style 属性操作元素样式
                a.style.width = "300px"; // 设置元素宽度为 300 px 
                a.style.height = "100px"; // 设置元素高度为 100 px 
                a.style.backgroundColor = "green";// 设置元素背景颜色为绿色
        </script> 
</body>

效果展示：

（2）通过 class 属性操作元素样式。一个元素可以有多个类选择器，开发中可以使用class 属性来达到我们想要的效果。

 classList 对象的属性和方法：

 举个例子：

<head> 
     <meta charset="utf-8"> 
     <title>例 11-3</title> 
     <style> 
         .big { font-size: 28px;} 
         .green { color: green;} 
         .red { color: red;} 
     </style> 
</head> 
<body> 
     <div id="content" class="big">操作元素样式</div> 
     <script> 
         // 获取 id 属性值为 content 的对应元素 div 
         var a = document.getElementById("content"); 
              // 获取并输出元素所有类名，结果为 big 
              console.log(a.classList.value); 
              a.classList.add("green"); // 给元素添加类名 green 
              console.log(a.classList.value); // 输出结果 big green 
              a.classList.remove("big"); // 删除元素类名 big 
              console.log(a.classList.value); // 输出结果 green 
              // 若元素中没有 big 类将添加；若有则删除
              a.classList.toggle("big"); 
             console.log(a.classList.value); // 输出结果 green big 
             // 用 red 类替换掉元素中的 green 类
             a.classList.replace("green", "red"); 
              console.log(a.classList.value); // 输出结果 red big 
             // 判断元素中是否包含 green 类
             var result = a.classList.contains("green"); 
             console.log(result); // 输出结果 false 
         </script> 
</body>

效果展示：

控制台：

4. DOM节点操作

一个完整的 HTML文档是由一个个元素标签嵌套组成的，大部分元素内容都包含其它元素节点。

① 获取节点

在 DOM 中，HTML文档是树状结构，且文档中的元素、属性、文本等不同的内容可以转换为 DOM 树的节点，不同的节点之间存在相互关系，比如父子关系，兄弟关系。

获取节点的常用属性：

 举个例子：

<h1>获取节点</h1> 
<div id="content"> 
     <span>我是一个 span 标签</span> 
     <!-- 我是一个注释 --> 
     <a href="#">我是一个 a 标签</a> 
</div> 
<p>我是一个 p 标签</p> 
<script> 
     // 获取 id 为 content 的元素 div 
     var a = document.getElementById("content");
    console.log("childNodes:",a.childNodes);//输出 a 的所有子节点的所有内容包括空格换行
     console.log("firstChild:",a.firstChild);//输出a 的第一个子节点的所有内容包括空格换行
     console.log("lastChild:",a.lastChild);//输出 a 的最后一个子节点的所有内容包括空格换行
     console.log("childNodes:",a.childNodes);//输出 a 的所有子节点所有的内容包括空格换行
    console.log("firstChild:",a.firstChild);//输出a 的第一个子节点所有内容包括空格换行
    console.log("lastChild:",a.lastChild);//输出 a 的最后一个子节点所有内容包括空格换行
     // 输出 a 的前一个兄弟节点所有的内容包括空格换行
     console.log("previousSibling:",a.previousSibling); 
     // 输出 a 的后一个兄弟节点所有的内容包括空格换行
     console.log("nextSibling: ", a.nextSibling); 
</script>

效果展示：

 ②增加修改创建节点

除了获取某个元素的相关节点外，DOM 提供了一些方法用于增加节点，如创建节点、插入节点、替换节点到对应元素的方法。

注意：创建节点的相关方法属于 document 对象，插入或替换节点的相关方法属于 element 对象、

举个例子：

<script>
     var a = document.getElementById("content");
     var pNode = document.createElement("p"); //创建一个 p 元素节点
     // 创建一个 id 属性节点
     var pAttrNode = document.createAttribute("id");
     pAttrNode.value = "title"; //设置 id 属性节点为 title 
     pNode.setAttributeNode(pAttrNode); //将属性节点设置到 p 元素节点
     // 创建一个文本节点
     var textNode = document.createTextNode("这是一个文本");
     pNode.appendChild(textNode); // 将文本节点插入到 p 元素节点
     // 创建一个注释节点
     var commentNode = document.createComment("这是一个注释");
     // 添加注释节点到文本节点之前
     pNode.insertBefore(commentNode, textNode);
     a.appendChild(pNode); //将 p 元素节点插入到 div 元素中
     console.log(a);
 </script>

效果展示：

 ③删除节点

除了获取和增加节点之外，DOM 还提供了删除节点的方法。删除节点的方法主要有removeChild() 和 removeAttributeNode() 。

removeChild() 方法用于删除指定元素节点，removeAtrributeNode() 方法用于删除指定属性节点。

举个例子：

<body>
    <h1>删除节点</h1>
    <div id="content" class="big">
    <p>这是一个 p 标签</p>
    </div>
    <script>
          var a = document.getElementById("content"); // 获取 div 元素
          var b = document.getElementsByTagName("p")[0]; // 获取 p 元素
          a.removeChild(b); // 从div元素中删除p元素节点
          // 从 div 元素中获取 class 属性节点
          var classNode = a.getAttributeNode("class");
          //从 div 元素中删除 class 属性节点
          a.removeAttributeNode(classNode);
          console.log(a);
    </script>
</body>

效果展示：

 控制台：