零基础入门JavaWeb——JS的文档对象模型（DOM）

迈不过友情╰ 2024-03-31 13:23 58阅读 0赞

## 一、DOM的概念 ##

DOM是Document Object Mode的缩写，意思是**文档对象模型**——将HTML文档抽象成模型，再封装对象方便用程序操作。

将现实世界的事物抽象成模型，使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。

## 二、DOM树 ##

浏览器把HTML文档从服务器上下载下来之后就开始按照**从上到下**的顺序**读取HTML标签**。每一个标签都会被封装成一个**对象**。

第一个读取的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签…所以从html标签开始，整个文档中的所有标签都会根据它们之间的**父子关系**被放到一个**树形结构**的对象中。

包含了所有标签对象的整个树形结构对象就是JavaScript中的一个**可以直接使用的内置对象：document**。

## 三、各个组成部分的类型 ##

这个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

<table> 
 <thead> 
  <tr> 
   <th>组成部分</th> 
   <th>节点类型</th> 
   <th>具体类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>整个文档</td> 
   <td>文档节点</td> 
   <td>Document</td> 
  </tr> 
  <tr> 
   <td>HTML标签</td> 
   <td>元素节点</td> 
   <td>Element</td> 
  </tr> 
  <tr> 
   <td>HTML标签内的文本</td> 
   <td>文本节点</td> 
   <td>Text</td> 
  </tr> 
  <tr> 
   <td>HTML标签内的属性</td> 
   <td>属性节点</td> 
   <td>Attr</td> 
  </tr> 
  <tr> 
   <td>注释</td> 
   <td>注释节点</td> 
   <td>Comment</td> 
  </tr> 
 </tbody> 
</table>

## 四、DOM的操作 ##

### 4.1 在整个文档范围内查询元素节点 ###

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>根据id值查询</td> 
   <td>document.getElementById(“id值”)</td> 
   <td>一个具体的元素节点</td> 
  </tr> 
  <tr> 
   <td>根据标签名查询</td> 
   <td>document.getElementsByTagName(“标签名”)</td> 
   <td>元素节点数组</td> 
  </tr> 
  <tr> 
   <td>根据name属性值查询</td> 
   <td>document.getElementsByName(“name值”)</td> 
   <td>元素节点数组</td> 
  </tr> 
  <tr> 
   <td>根据类名查询</td> 
   <td>document.getElementsByClassName(“类名”)</td> 
   <td>元素节点数组</td> 
  </tr> 
 </tbody> 
</table>

### 4.2 在具体元素节点范围内查找子节点 ###

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查找子标签</td> 
   <td>element.children</td> 
   <td>返回子标签数组</td> 
  </tr> 
  <tr> 
   <td>查找第一个子标签</td> 
   <td>element.firstElementChild</td> 
   <td>标签对象</td> 
  </tr> 
  <tr> 
   <td>查找最后一个子标签</td> 
   <td>element.lastElementChild</td> 
   <td>节点对象</td> 
  </tr> 
 </tbody> 
</table>

### 4.3 查找指定元素节点的父节点 ###

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查找指定元素节点的父标签</td> 
   <td>element.parentElement</td> 
   <td>标签对象</td> 
  </tr> 
 </tbody> 
</table>

### 4.4 查找指定元素节点的兄弟节点 ###

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>查找前一个兄弟标签</td> 
   <td>node.previousElementSibling</td> 
   <td>标签对象</td> 
  </tr> 
  <tr> 
   <td>查找后一个兄弟标签</td> 
   <td>node.nextElementSibling</td> 
   <td>标签对象</td> 
  </tr> 
 </tbody> 
</table>

### 4.5 根据选择器查找标签 ###

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>API</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>根据选择器查找一个标签</td> 
   <td>document.querySelector(“选择器”)</td> 
   <td>标签对象</td> 
  </tr> 
  <tr> 
   <td>根据选择器查找多个标签</td> 
   <td>document.querySelectorAll(“选择器”)</td> 
   <td>标签数组</td> 
  </tr> 
 </tbody> 
</table>

### 4.6 示例代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM查找节点</title>
    </head>
    <body>
        <input type="text" id="username">
        <input type="text" class="c1">
        <input type="text" class="c1">
        <script>
            // 根据id查询标签
            var elementById = document.getElementById("username");
            console.log(elementById)
    
            // 根据类名查询标签
            var elementsByClassName = document.getElementsByClassName("c1");
            console.log(elementsByClassName)
    
            // 根据标签名查询标签
            var elementsByTagName = document.getElementsByTagName("input");
            console.log(elementsByTagName)
    
            // 查找子节点
            var element = document.getElementsByTagName("body")[0].childNodes;
            console.log(element)
    
            // 查找子标签
            var children = document.getElementsByTagName("body")[0].children;
            console.log(children)
    
            // 查找父节点（id为username的标签的父节点）
            var parentNode = document.getElementById("username").parentNode;
            console.log(parentNode)
    
            // 查找id为username的标签的前一个兄弟节点
            var previousSibling = document.getElementById("username").previousSibling;
            console.log(previousSibling)
    
            // 查找id为username的标签的前一个兄弟标签
            var previousElementSibling = document.getElementById("username").previousElementSibling;
            console.log(previousElementSibling)
    
            // 查找id为username的标签的后一个兄弟标签
            var nextElementSibling = document.getElementById("username").nextElementSibling;
            console.log(nextElementSibling)
    
            // 根据选择器查找标签
            // 基本
            // #id
            // element
            // .class
            // selector1,selector2,selectorN
            // 层级
            // ancestor descendant 所有后代
            // parent > child
            // prev + next 后面的第一个兄弟
            // prev ~ siblings 后面的所有兄弟
            // 根据选择器查找一个标签
            var querySelector = document.querySelector("#username");
            console.log(querySelector)
    
            // 根据选择器查找多个标签
            var querySelectorAll = document.querySelectorAll(".c1");
            console.log(querySelectorAll)
    
    
        </script>
    </body>
    </html>

### 4.7 属性操作 ###

<table> 
 <thead> 
  <tr> 
   <th>需求</th> 
   <th>操作方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>读取属性值</td> 
   <td>元素对象.属性名</td> 
  </tr> 
  <tr> 
   <td>修改属性值</td> 
   <td>元素对象.属性名 = 新的属性值</td> 
  </tr> 
 </tbody> 
</table>

### 4.8 标签体的操作 ###

<table> 
 <thead> 
  <tr> 
   <th>需求</th> 
   <th>操作方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>获取或者设置标签体的文本内容</td> 
   <td>element.innerText</td> 
  </tr> 
  <tr> 
   <td>获取或者设置标签体的内容</td> 
   <td>element.innerHTML</td> 
  </tr> 
 </tbody> 
</table>

### 4.9 示例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作标签的属性和文本</title>
    </head>
    <body>
        <input type="text" id="username" name="username">
        <div id="d1">
            你好世界
        </div>
    
        <div id="d2">
            <h1>你好世界</h1>
        </div>
        <script>
            // 目标：获取id为username的输入框的value
    
            // 1. 找到要操作的标签
            var ipt = document.getElementById("username");
    
            // 设置标签的value
            ipt.value = "马超"
    
            // 2. 获取标签的value属性的值
            var value = ipt.value;
            console.log(value)
    
    
            // 获取id为d1的div中的文本内容
            // 获取标签的文本：element.innerText，获取文本的时候会将左右两端的空格去掉
            var innerText = document.getElementById("d1").innerText;
            console.log(innerText)
    
            var innerText2 = document.getElementById("d2").innerText;
            console.log(innerText2)
    
            // 获取标签体的内容：element.innerHTML，获取标签体的内容
            var innerHTML = document.getElementById("d2").innerHTML;
            console.log(innerHTML)
    
            // 设置标签体的内容：建议使用innerHTML
            document.getElementById("d2").innerHTML="<p>你好不？世界</p>"
    
            var innerHTML2 = document.getElementById("d2").innerHTML;
            console.log(innerHTML2)
        </script>
    </body>
    </html>

### 4.10 DOM增删改操作 ###

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.createElement(“标签名”)</td> 
   <td>创建元素节点并返回，但不会自动添加到文档中</td> 
  </tr> 
  <tr> 
   <td>document.createTextNode(“文本值”)</td> 
   <td>创建文本节点并返回，但不会自动添加到文档中</td> 
  </tr> 
  <tr> 
   <td>element.appendChild(ele)</td> 
   <td>将ele添加到element所有子节点后面</td> 
  </tr> 
  <tr> 
   <td>parentEle.insertBefore(newEle,targetEle)</td> 
   <td>将newEle插入到targetEle前面</td> 
  </tr> 
  <tr> 
   <td>parentEle.replaceChild(newEle,oldEle)</td> 
   <td>用新节点替换原有的旧子节点</td> 
  </tr> 
  <tr> 
   <td>element.remove()</td> 
   <td>删除某个标签</td> 
  </tr> 
  <tr> 
   <td>element.innerHTML</td> 
   <td>读写HTML代码</td> 
  </tr> 
 </tbody> 
</table>

### 4.11 示例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建和删除标签</title>
    </head>
    <body>
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
            <li id="sz">深圳</li>
            <li>广州</li>
        </ul>
    
        <script>
            // 目标：在城市列表中添加一个子标签<li id="cs">长沙</li>
            // 1. 创建一个li标签<li></li>
            var liElement = document.createElement("li");
            // 2. 给创建的li标签设置id属性和文本
            liElement.id="cs"
            liElement.innerText="长沙"
            // 3. 将创建的li标签添加到城市列表中（ul）
            var cityUl = document.getElementById("city");
            // 父.appendChild(子)将子标签添加到父标签的最后面
            // cityUl.appendChild(liElement)
    
            // 目标：在城市列表的“深圳“之前添加一个字标签<li id="cs">长沙</li>
            var szElement = document.getElementById("sz");
            // 父.insertBefore(新标签,参照标签)
            // cityUl.insertBefore(liElement,szElement)
    
            // 目标：在城市列表中添加一个子标签替换深圳<li id="cs">长沙</li>
            // 父.replaceChild(新标签，被替换的标签)
            // cityUl.replaceChild(liElement,szElement)
    
            // 目标：在城市列表中删除深圳
            szElement.remove()
    
            // 目标：清楚城市中的所有城市。
            cityUl.innerHTML=""
        </script>
    </body>
    </html>

## 学海无涯苦作舟 ##