【浏览器】聊聊 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
公众号 - 归子莫，小程序 - 小归博客