【浏览器】聊聊DOM

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

说明

作为前端开发，在以前的工作中大多是和DOM打交道，到了现在，大多数前端工程师都是和Vue打交道了。让Vue去和DOM交流。这并非是讽刺，只是说明这个事实，同时也说明了Vue的强大。

但，想要更深的了解前端，需要打开Vue的保护伞，看看DOM，更甚的是，熟悉DOM。走向底层，同时也走向高层！

没准下一代“Vue”的开发者不姓尤。

什么是DOM？

首先来介绍一下，什么是DOM，这个臭了的问题，还是在这里得以继续延伸，我很抱歉，但是还是不能去掉这个过程。

听听W3C的

DOM全程是文档对象模型（Document Object Model），是一项 W3C (World Wide Web Consortium) 标准。它主要定义了访问文档的标准：

W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个的父对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

听听总结的

DOM就是将标记语言文档的各个组成部分，封装为对象。然后开发者（前端切图仔）就可以使用这些对象，对标记语言文档进行CRUD的动态操作。

什么是HTML DOM？

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。注意，通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

总结

咱们熟悉的总结又来了️，这次不多说，HTML DOM就是一套对HTML元素的CURD，CURD在看各位没有不熟悉，没有不兴奋的吧。

Document：文档对象

Document对象的属性和方法：HTML DOM Document 对象

创建(获取)

在html dom模型中可以使用window对象来获取，例如在浏览器中输入document，就会返回一个文档对象。

window.document

document

Element对象

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

获取Element对象的方法

getElementById()：根据id属性值获取元素对象。id属性值一般唯一

getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组

getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组

getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组

Element属性和方法

乍一看实在是太多了，多得我那是根本不想数，但是又不想直接CV在此。

属性 / 方法	描述
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。

给个开头，再把完全的地址贴出来，HTML DOM Element 对象

Attr对象

在 HTML DOM 中，Attr 对象表示 HTML 属性，HTML 属性始终属于 HTML 元素。

操作方法

removeAttribute()：删除属性

setAttribute()：设置属性

Attr的属性和方法

HTML DOM Attr 对象

DOM 4 警告！

在 W3C DOM Core 中，Attr (attribute) 对象从 Node 对象继承所有属性和方法。

在 DOM 4 中，Attr 对象不再从 Node 继承。为了保证未来的代码安全，应该避免在属性对象上使用节点对象的属性和方法。

NamedNodeMap 对象

在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合，NamedNodeMap 中的节点可通过名称或索引（数字）来访问。

Text对象

Text 对象代表 HTML 表单中的文本输入域，该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。

Text的属性和方法

HTML DOM Input Text 对象

Comment对象

Comment是注释对象，在对HTML编码时，总会有一些注释，但是注释的代码，众所周知，是没有被执行的。在HTML中，它就存放在Comment对象中。

createComment() 方法可创建注释节点，一般对这个对象的操作比较的少，也没啥地址可贴的了。

最后说的话

在写这篇文章的时候，我一直在思考有没有必要写这样的一篇文章，其实感觉写这样的文章很难，尽管大多数是一些标准和协议，但往往就是这些标准和协议难以突破，同时自己也在慢慢积累与沉淀，能沉下心写，甚至抄点基础的东西，补足那个圆的一节，感觉会很踏实很多。

本文也是第二次扩写，从500到1500。有机会，或者再有累计的话再扩写吧，到时希望在这些标准之上有所突破哈。

感谢

万能的网络

菜鸟教程、w3school

以及勤劳的自己，个人博客，GitHub测试，GitHub

公众号-归子莫，小程序-小归博客