【浏览器】聊聊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.documentdocument

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

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