【前端技术】【DOM】认识DOM
一、什么是DOM及其作用
DOM（Document Object Model 文档对象模型 ） 是 HTML 和 XML 文档的编程接口。
主要作用是：DOM提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。
二、DOM具体如何体现
DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。DOM提供了对同一份文档的另一种表现，存储和操作的方式。这个文档可以在浏览器窗口或作为 HTML 源码显示出来，所以一个 web 页面是一个文档。
DOM是在浏览器中使用，所有大多数浏览器都有对DOM的基本实现，逐渐形成标准，这有标准有：W3C DOM 和WHATWG DOM。他们的DOM区别就是有些实现方法不一样。
三、DOM与浏览器的关系
在浏览器页面文档中，每个元素（ 包括整个文档，文档头部， 文档中的表格，表头，表格中的文本）都是文档对象模型（DOM）的一部分，因此它们可以使用 DOM 和一个脚本语言如 JavaScript，来访问和处理。
开始的时候，JavaScript 和 DOM 是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript 可以访问和操作存储在 DOM 中的内容，因此我们可以写成这个近似的等式：API (web 或 XML 页面) = DOM + JS (脚本语言)
DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的 API 获得。尽管我们在本参考文档中会专注于使用 JavaScript， 但 DOM 也可以使用其他的语言来实现
四、DOM如何使用
在使用 DOM 时，您不需要做任何其他特殊的操作。不同的浏览器都有对 DOM 不同的实现， 这些实现对当前的 DOM 标准而言，都会呈现出不同程度的一致性，每个 web 浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问。
（1）简单使用
当您在创建一个脚本时 - 无论是使用内嵌 <script>元素或者使用在 web 页面脚本加载的方法— 您都可以使用 document或 window 元素的 API 来操作文档本身或获取文档的子类（web 页面中的各种元素）。
除了定义 JavaScript 的 <script> 元素外， 当文档被装载（以及当整个 DOM 可以被有效使用时），JavaScript 可以设定一个函数来运行。下面的函数会创建一个新的 H1 元素，为元素添加文本，并将 H1 添加在文档树中。
<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
heading = document.createElement("h1");
heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>
（2）常用的DOM API及数据对象
| 数据对象 |
API |
说明 |
| document |
|
当一个成员返回 document 对象（例如，元素的 ownerDocument 属性返回它所属于 document ) ，这个对象就是 root document 对象本身 |
| element |
|
element 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点。 例如， document.createElement() 方法会返回一个 node 的对象引用，也就是说这个方法返回了在 DOM 中创建的 element。 element 对象实现了 DOM Element 接口以及更基本的 Node 接口 |
| nodeList |
- |
nodeList 是一个元素的数组对象，如从 document.getElementsByTagName() 方法返回的就是这种类型。 nodeList 中的条目由通过下标有两种方式进行访问： list.item(1) list[1] 两种方式是等价的，第一种方式中 item() 是 nodeList 对象中的单独方法。 后面的方式则使用了经典的数组语法来获取列表中的第二个条目。 |
| attribute |
- |
当 attribute 通过成员函数 (例如，通过 createAttribute()方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM 中的属性也是节点，就像元素一样，只不过您可能会很少使用它。 |
| namedNodeMap |
- |
namedNodeMap 和数组类似，但是条目是由 name 或 index 访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。 出于这个目的， namedNodeMap 有一个 item() 方法，你也可以从 namedNodeMap 添加或移除条目。 |
|
|
|
window对象是JS中的全局对象，可以在任何地方调用，而且任何对象的使用都会追溯到对window对象的访问。 |
- 点赞
- 收藏
- 关注作者
评论（0）