DOM简介

古城微笑少年丶 2024-05-08 06:30 5阅读 0赞

#### 文章目录 ####

*  理论知识
 *   *  动态改变DOM树的节点
     *  DOM树节点的基本接口
     *  对象和接口的关系
     *  DOM中常用接口的方法

## 理论知识 ##

页面也应用了面向对象的思想，一个页面会被组织成一个document对象，这个document对象是顶级对象，此对象下又可以包含很多子对象，即页面上的元素。元素可以通过多种API进行添加。

DOM不是一种编程语言，而是对HTML或者XML等文档的一种结构化表示方法。DOM向外提供了很多API，通过这些API可以操控DOM里的元素。DOM可以用任何语言来实现，而不仅仅是JavaScript，只不过大多数人会用JS来实现DOM（这里的实现是指把抽象的标记放入到内存中，进而进行一系列操作）。

DOM提前定义了一系列标签，如div，span，body等

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1Njk3_size_16_color_FFFFFF_t_70]

### 动态改变DOM树的节点 ###

下面这个例子实现了通过DOM接口向DOM树中添加一个文本组件

<html>
      <head>
        <script>
           // run this function when the document is loaded
           window.onload = function() {
          
    
             // create a couple of elements in an otherwise empty HTML page
             const heading = document.createElement("h1");
             const heading_text = document.createTextNode("Big Head!");
             heading.appendChild(heading_text);
             document.body.appendChild(heading);
          }
        </script>
      </head>
      <body>
      </body>
    </html>

### DOM树节点的基本接口 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">接口类型</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">Document</td> 
   <td align="center">提供了返回父节点元素的方法</td> 
  </tr> 
  <tr> 
   <td align="center">Node</td> 
   <td align="center">Node接口</td> 
  </tr> 
  <tr> 
   <td align="center">Element</td> 
   <td align="center">Element接口，继承自Node接口</td> 
  </tr> 
  <tr> 
   <td align="center">NodeList</td> 
   <td align="center">提供了返回节点列表的方法</td> 
  </tr> 
  <tr> 
   <td align="center">Attr</td> 
   <td align="center">提供了返回节点属性的方法</td> 
  </tr> 
  <tr> 
   <td align="center">NameNodeMap</td> 
   <td align="center">提供了返回节点名称和引用映射关系的方法</td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

除此之外，DOM中还有很多接口

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1Njk3_size_16_color_FFFFFF_t_70 1]

### 对象和接口的关系 ###

在DOM中一个对象通过实现某个接口来表明自己的身份，比如表单元素FORM就实现了HTMLFormElement接口。但一个对象可能会实现多个接口，如一个Table对象既实现了HTMLTableElement接口又实现了Element接口，所以当寻找所有的Element元素时会找到这个Table对象。

DOM中有两个非常重要的元素：document和window对象。window对象可以看作浏览器，document对象可以看作整个文档对象。

下面的这个例子既使用了Element接口的方法又使用了HTMLTableElement接口的方法

const table = document.getElementById("table");
    const tableAttrs = table.attributes; // Node/Element interface
    for (let i = 0; i < tableAttrs.length; i++) {
        
      // HTMLTableElement interface: border attribute
      if(tableAttrs[i].nodeName.toLowerCase() == "border")
        table.border = "1";
    }
    // HTMLTableElement interface: summary attribute
    table.summary = "note: increased border";

### DOM中常用接口的方法 ###

*  document.querySelector(selector) : 根据选择器返回相应的标签对象
 *  document.querySelectorAll(name) : 根据标签的名称返回所有相应的标签对象
 *  document.createElement(name) : 创建对应的标签
 *  parentNode.appendChild(node) : 将子节点挂载到父节点上
 *  element.innnerHTML : 获取元素的HTML值
 *  element.setAttribute() : 设置元素的相应属性
 *  element.getAttribute() : 获取元素的相应属性
 *  element.addEventListener() : 为元素添加事件监听器

[参考链接1][1]

[DOM完整介绍][DOM]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1Njk3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/08/f35b5f232d5749589ec01da8a9a9ef58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1Njk3_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/08/99faa859e073430d843f8132c15f4d05.png
[1]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
[DOM]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model