DOM概述

DOM概述

• 什么是 DOM?
• DOM 和 JavaScript
• 如何访问 DOM?
• DOM树
• 重要的数据类型
• DOM核心接口

什么是 DOM?

文档对象模型 (DOM) 是HTML和XML文档的编程接口。
它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。
DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

W3C DOM 和WHATWG DOM标准在绝大多数现代浏览器中都有对DOM的基本实现。许多浏览器提供了对W3C标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的DOM来访问。

所有操作和创建web页面的属性，方法和事件都会被组织成对象的形式（例如， document 对象表示文档本身， table 对象实现了特定的
HTMLTableElement DOM 接口来访问HTML 表格等）。

  <div class="box"></div>
    <script>
        // var box = document.querySelector('.box');
        var box = document.getElementsByClassName('box')
        console.dir(box);
    </script>

DOM 和 JavaScript

DOM 并不是一个编程语言，但如果没有DOM， JavaScript 语言也不会有任何网页，XML页面以及涉及到的元素的概念或模型。
在文档中的每个元素— 包括整个文档，文档头部， 文档中的表格，表头，表格中的文本 —
都是文档所属于的文档对象模型（DOM）的一部分，因此它们可以使用DOM和一个脚本语言如 JavaScript，来访问和处理。

开始的时候，JavaScript和DOM是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：

API (web 或 XML 页面) = DOM + JS (脚本语言)

如何访问 DOM?

在使用DOM时，您不需要做任何其他特殊的操作。不同的浏览器都有对DOM不同的实现， 这些实现对当前的DOM标准而言，都会呈现出不同程度的一致性，每个web浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问。

当在创建一个脚本时-无论是使用内嵌 <script>元素或者使用在web页面脚本加载的方法— 都可以使用 document或 window 元素的API来操作文档本身或获取文档的子类（web页面中的各种元素）。

DOM树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

重要的数据类型

一般情况下，在API参考文档中的语法实例通常会
使用element(s) 指代节点，
使用nodeList（s）或 element(s)来指代节点数组，
使用 attribute(s)来指代属性节点。

DOM核心接口

此处仅列一些DOM常用接口，并不会描述这些API在做什么，但是会让你了解当你使用DOM时常用的各种方法和属性。
在DOM编程时，通常使用的最多的就是 Document 和 window 对象。简单的说，

• window 对象表示浏览器中的内容，
• document 对象是文档本身的根节点。
• Element 继承了通用的 Node 接口,

将document和Element这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口。

下面列举一些在web和XML页面脚本中使用DOM时，常用的API简要列表：

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute()
• element.getAttribute()
• element.addEventListener()
• window.content
• window.onload
• window.dump()
• window.scrollTo()