DOMDOM入门


备注

DOM或文档对象模型是Web浏览器和其他应用程序用于访问HTML文档内容的API。

DOM表示结构为树,节点可以包含子节点,没有子节点的节点表示叶节点。

有了它,人们就可以操纵文档及其组成部分的结构和属性。

主要主题包括查找元素,访问样式信息和动画。

DOM的大部分工作都是使用JavaScript语言完成的,但API对所有语言都是开放的。

版本

W3C DOM

发布日期
1 1998-10-01
2 (核心) 2000年11月13日
3 (核心) 2004-04-07
4 2013年11月7日

选择器API级别

发布日期
1 2013年2月21日

入门

DOM(文档对象模型)是HTML和XML文档的编程接口,它定义了文档的逻辑结构以及文档的访问和操作方式。

DOM API的主要实现者是Web浏览器。规范由W3CWHATWG组标准化,对象模型指定编程接口的逻辑模型。

DOM结构的表示类似于树状视图,其中每个节点是表示标记的一部分的对象,取决于每个元素还继承特定和共享功能的类型。

选择名称“文档对象模型”是因为它是传统面向对象设计意义上的“对象模型”:文档使用对象建模,模型不仅包含文档结构,还包含文档行为以及它的组成对象。换句话说,采用示例HTML图表,节点不代表数据结构,它们代表具有功能和身份的对象。作为对象模型,文档对象模型标识:

  • 用于表示和操作文档的接口和对象
  • 这些接口和对象的语义 - 包括行为和属性
  • 这些接口和对象之间的关系和协作

HTML标记

示例输入:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>
 

DOM元素输出:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 
 

以上所有元素都继承自HTMLElement接口,并根据特定标记进行自定义

检索现有的html元素

最常见的任务之一是从DOM中检索现有元素进行操作。最常见的是这些方法在document 上执行,因为它是根节点,但所有这些方法都适用于树中的任何HTML元素。它们只会从执行它的节点返回子节点。

通过id检索

var element = document.getElementById("logo");
 

element 将包含其id 属性设置为“logo”的(唯一)元素,如果不存在此类元素,则包含null 。如果存在具有此id的多个元素,则该文档无效,并且可能发生任何事情。

按标签名称检索

var elements = document.getElementsByTagName("a");
 

elements 将包含文档中所有链接标记的实时 HTMLCollection (类似于数组的对象)。此集合与DOM同步,因此对DOM所做的任何更改都会反映在此集合中。该集合提供随机访问并具有长度。

var element = elements[0];
//Alternative
element = elements.item(0);
 

element 包含第一个遇到的HTML链接元素,如果索引超出范围,则返回null

var length = elements.length;
 

length 等于列表中当前的HTML链接元素的数量。更改DOM时,此数字可能会更改。

按类检索

var elements = document.getElementsByClassName("recipe");
 

elements 将包含所有元素的实时 HTMLCollection (类似数组的对象),其class 属性包含“recipe”。此集合与DOM同步,因此对DOM所做的任何更改都会反映在此集合中。该集合提供随机访问并具有长度。

var element = elements[0];
//Alternative
element = elements.item(0);
 

element 包含第一个遇到此类的HTML元素。如果没有这样的元素,则element 在第一个示例中具有undefinednull ,在第二个示例中具有null

var length = elements.length;
 

length 等于当前具有类“recipe”的HTML元素的数量。更改DOM时,此数字可能会更改。

按名称检索

var elements = document.getElementsByName("zipcode");
 

elements 将包含所有元素的实时 NodeList (类似于数组的对象),其name 属性设置为“zipcode”。此集合与DOM同步,因此对DOM所做的任何更改都会反映在此集合中。该集合提供随机访问并具有长度。

var element = elements[0];
//Alternative
element = elements.item(0);
 

element 包含第一个遇到此名称的HTML元素。

var length = elements.length;
 

length 等于当前具有“zipcode”作为其name属性的HTML元素的数量。更改DOM时,此数字可能会更改。

使用innerHTML

HTML

<div id="app"></div>
 

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'
 

现在HTML看起来像这样

<div id="app">
    <p>Some text</p>
</div>
 

等待加载DOM

当与<script> DOM <script> 交互的<script> 代码包含在<head> 部分中时,请使用DOMContentLoaded 。如果没有包装在DOMContentLoaded 回调中,代码将抛出错误

无法读取null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});
 

https://html.spec.whatwg.org/multipage/syntax.html#the-end

DOMContentLoaded 替代方案

另一种选择(适用于IE8

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}
 

https://developer.mozilla.org/en/docs/Web/API/Document/readyState