【浏览器】聊聊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元素的CURDCURD在看各位没有不熟悉,没有不兴奋的吧。

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的属性和方法

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:relieved:。有机会,或者再有累计的话再扩写吧,到时希望在这些标准之上有所突破哈。

感谢

万能的网络

菜鸟教程w3school

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

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

上一篇 下一篇