这是我参与11月更文挑战的第 17 天，活动详情查看：2021最后一次更文挑战

DOM

DOM是什么？

DOM是个缩写，全称是Document Object Model，被译为文档对象模型。

D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象。
O表示Object，就是DOM将HTML页面中每个元素解析为一个对象。
M表示Model，就是DOM中表示各个对象之间的关系。

DOM的标准

由于DOM的标准规范是由W3C组织起草并定义的，所以W3C对DOM的定义是目前最权威的解释。下面这段英文描述，就是W3C对DOM的定义原文:

The Docunent Object Model is a platforim-and language-neutral interface that will allow programs and scripts to dynarnically access and update the content, structure and style of docunents.The docurnent can be further processed and the results of that processing can be incorporated back into the presented page.

下面这段是作者的翻译（仅供参考）:

DOM是一个独立于任何语言和平台的接口，允许任何语言或脚本动态地访问和更新HTML文档的内容、结构和样式。该HTML页面可以进一步处理，并且该处理的结果可以被合并到所呈现的HTML页面中。

DOM的作用

DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。

DOM是由W3C组织定义标准规范，并且由各大浏览器厂商支持。严格意义上来讲，DOM并非属于 JavaScript语言。

我们之所以可以在JavaScript语言中使用DOM，是因为各大测览器将DOM的标准规范内容封装成了 JavaScript语言所支持的形式。

对DOM中的对象，我们只有调用的权限，没有修改的权限，也说明了这个问题。

浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装成了JavaScript语言中的对象，所以我们可以使用JavaScript语言通过DOM结构来访问和操作HTML页面中的内容。

DOM树结构

DOM可以访问和更相信HTML页面中的内容、结构和样式，是因为DOM将HTML页面解析为一个树结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
        <h2>这是一个示例页面</h2>
        <p id="p" title="this is p.">这是一个段落内容</p>
</body>
</html>

上述示例HTML页面绘制成DOM树结构，如下效果：

HTML代码和DOM树结构具体分析图如下所示：

节点是什么

节点(Node）原本是网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。

在DOM树结构中，节点也是很重要的一个概念。简单来说，节点作为DOM树结构中的连接点，最终构成了完整的DOM树结构。

常量	值	描述
Node.DOCUMENT_NODE	9	文档节点，表示整个HTML页面（相当于document对象
Node.ELEMENT_NODE	1	元素节点，表示HTML页面中的标签（即HTML页面的结构）
Node.ATTRIBUTE_NODE	2	属性节点，表示HTML页面中的开始标签包含的属性。在DOM 4规范里Node接口将不再实现这个元素属性
Node.TEXT_NODE	3	文本节点，表示HTML页面中的标签所包含的文本内容

DOM节点树

通过节点概念，可以将原本的DOM树结构改成DOM节点树结构进行表示。

HTML代码和DOM节点树结构示意解析图如下所示：

DOCUMENT 对象

Document对象是DOM的标准规范中比较重要的对象之一。该对象提供了访问和更新HTML页面内容的属性和方法。

Document对象作为DOM访问和更新HTML页面内容的人口。简单来说，可以把Document对象理解为DOM的标准规范中代表HTML页面。

Document对象提供的属性和方法，可以实现定位HTML页面中的元素，或者创建新的元素等功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOCUMENT对象</title>
</head>
<body>
<script>
    /*
    *   document对象
    *   DOM预定义 —— 已经被创建完毕了 —— 允许直接使用
    *   得到的是HTML页面的源代码 —— 该对象代表当前HTML页面
    * */

    console.log(document);
    //document的确是一个JavaScript对象
    console.log(document instanceof Object);//true
    // document对象的属性和方法被定义在原型上
    console.log(Document.prototype);//Document {…}
    //document 已经创建了不需要我们自己创建了
    var document = new Document();
    console.log(document);

</script>
</body>
</html>

继承链关系

Document对象是继承于Node对象的。Node对象也是DOM的标准规范中非常重要的对象之一，而 Node对象又是继承于EventTarget对象。

//document对象是继承于Node的
console.log(Document.prototype instanceof Node);//true
// node对象是继承于EventTarget的
console.log(Node.prototype instanceof EventTarget);//true

console.log(Document.prototype instanceof EventTarget);//true

Document对象的属性和方法多是继承于Node对象和EventTarget对象的。当然，也有一部分属性和方法是实现了HTML Document接口的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Document 对象的继承链</title>
</head>
<body>
<script>
    //document对象是继承于Node的
    console.log(Document.prototype instanceof Node);//true
    // node对象是继承于EventTarget的
    console.log(Node.prototype instanceof EventTarget);//true

    console.log(Document.prototype instanceof EventTarget);//true
    // DOM中的对象之间的继承关系远比语法中的继承关系复杂
    console.log(Document.prototype instanceof HTMLDocument );
</script>
</body>
</html>

定位页面元素方法

Document对象提供了属性和方法实现定位页面元素功能，这也是DOM的标准规范中Document对象的主要应用之一。

Document对象提供实现定位页面元素的方法具有如下几种:

getElementByld()方法：通过页面元素的id属性值定位元素。
getElementsByName()方法：通过页面元素的name属性值定位元素。
geElementsBy TagName()方法：通过页面元素的元素名定位元素。
getElementsByClassName()方法：通过页面元素的class属性值定位元素。
querySelector()方法：通过CSS选择器定位第一个匹配的元素。
querySelectorAll()方法：通过CSS选择器定位所有匹配的元素。

1、getElenentByld()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById()方法</title>
</head>
<body>
<div id="d1"></div>
<button id="btn">按钮</button>
<script>
    //1、通过Document对象的getElementById()方法定义元素
    var buttonElement = document.getElementById('btn');
    /*
    *   DOM 提供了一系列的对象 —— 对应HTML页面的每一个元素
    * <button>元素对应具有HTMLButtonElement对象
    * <div>元素对应具有HTMLDivElement对象
    * */
    console.log(buttonElement instanceof Object);//true
    console.log(buttonElement instanceof HTMLButtonElement);//true

    var d1 = document.getElementById('d1');
    console.log(d1 instanceof HTMLDivElement);//trues
</script>
</body>
</html>

注意：getElenentByld()方法查找是唯一的，效率不高。

2、getElementsByName()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByName()方法</title>
</head>
<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
    //name属性不唯一   ----  得到的结果可能是多个，也可能是一个
    var buttonElements = document.getElementsByName('btns');
    /*
    *   NodeList集合 —— 类数组对象
    *   得到每一个对应元素的话 —— 通过索引值
    * */
    console.log(buttonElements[2]);
    console.log(buttonElements instanceof NodeList);//true
</script>
</body>
</html>

3、geElementsBy TagName()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName()方法</title>
</head>
<body>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<button name="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByTagName('button');
    console.log(buttonElements);
/*
  HTMLCollection集合 —— 类数组对象
*/
    console.log(buttonElements[0]);
</script>
</body>
</html>

4、getElementsByClassName()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName()方法</title>
</head>
<body>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    var buttonElements = document.getElementsByClassName('btns');
    //HTMLCollection集合 —— 类数组对象
    console.log(buttonElements);
</script>
</body>
</html>class

DOM 文档对象模型

DOM