【浏览器】聊聊DOM
博客说明
文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
说明
作为前端开发，在以前的工作中大多是和DOM打交道，到了现在，大多数前端工程师都是和Vue打交道了。让Vue去和DOM交流。这并非是讽刺，只是说明这个事实，同时也说明了Vue的强大。
但，想要更深的了解前端，需要打开Vue的保护伞，看看DOM，更甚的是，熟悉DOM。走向底层，同时也走向高层！
没准下一代“Vue”的开发者不姓尤:laughing:。
什么是DOM？
首先来介绍一下，什么是DOM，这个臭了的问题，还是在这里得以继续延伸，我很抱歉，但是还是不能去掉这个过程:grimacing:。
听听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 元素的标准。
总结
咱们熟悉的总结又来了:relaxed:，这次不多说，HTML DOM就是一套对HTML元素的CURD，CURD在看各位没有不熟悉，没有不兴奋的吧。
Document：文档对象
Document对象的属性和方法：HTML DOM Document 对象
创建(获取)
在html dom模型中可以使用window对象来获取，例如在浏览器中输入document，就会返回一个文档对象。
window.document
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的属性和方法
DOM 4 警告！
在 W3C DOM Core 中，Attr (attribute) 对象从 Node 对象继承所有属性和方法。
在 DOM 4 中，Attr 对象不再从 Node 继承。为了保证未来的代码安全，应该避免在属性对象上使用节点对象的属性和方法。
NamedNodeMap 对象
在 HTML DOM 中，NamedNodeMap 对象表示元素属性节点的无序集合，NamedNodeMap 中的节点可通过名称或索引（数字）来访问。
Text对象
Text 对象代表 HTML 表单中的文本输入域，该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。
Text的属性和方法
Comment对象
Comment是注释对象，在对HTML编码时，总会有一些注释，但是注释的代码，众所周知，是没有被执行的。在HTML中，它就存放在Comment对象中。
createComment() 方法可创建注释节点，一般对这个对象的操作比较的少，也没啥地址可贴的了。
最后说的话
在写这篇文章的时候，我一直在思考有没有必要写这样的一篇文章，其实感觉写这样的文章很难，尽管大多数是一些标准和协议，但往往就是这些标准和协议难以突破，同时自己也在慢慢积累与沉淀，能沉下心写，甚至抄点基础的东西，补足那个圆的一节，感觉会很踏实很多。
本文也是第二次扩写，从500到1500:relieved:。有机会，或者再有累计的话再扩写吧，到时希望在这些标准之上有所突破哈。
感谢
万能的网络
公众号-归子莫，小程序-小归博客
网友评论