DOM、DOM 树

DOM

JavaScript 操作网页的接口，全称为“文档对象模型”(Document Object Model)。

有这几个概念：文档、元素、节点

• 整个文档是一个文档节点
• 每个标签是一个元素节点
• 包含在元素中的文本是文本节点
• 每一个属性是一个属性节点
• 注释属于注释节点

DOM 树：

DOM 树是结构 , 所谓层级结构是指元素和元素之间的关系(父子，兄弟)

DOM 是 Document Object Model（文档对象模型）的缩写。提供给 Javascript 用来动态修改文档状态…

5 个常用的 DOM 方法：getElemenById、getElementsByTagName、getElementsByClassName、getAttribute 和 setAttribute

• 文档：DOM 中的"D"

如果没有 document（文档），DOM 也就无从谈起。当创建了一个网页并把它加载到 Web 浏览器中时，DOM 就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。

• 对象：DOM 中的"O"

对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性和方法。

属性是隶属于某个特定对象的变量；

方法是只有某个特定对象才能调用的函数

对象就是由一些属性和方法组合在一起而构成的一个数据实体。在 javaScript 中，属性(property)和方法(method)都使用“点”语法来访问：

object.propertyobject.method()

JavaScript 语言里面的对象可以分为三种类型。

- 用户定义对象：由程序员自行创建的对象。

- 內建对象：內建在 JavaScript 语言里的对象，如 Array、Math 和 Date 等。

- 宿主对象：由浏览器提供的对象。

即使是在 JavaScript 的最初版本里，对编写脚本来说非常重要的一些宿主对象就已经可用了，他们当中最基础的对象是 window（浏览器窗口）对象。

• 模型：DOM 中的"M"

DOM 中的“M”代表着“Model”（模型），它的含义是某种事物的表现形式，DOM 代表着加载到浏览器窗口的当前网页。浏览器提供了网页的模型，而我们可以通过 JavaScript 去读取这张地图。

原文链接：https://www.jianshu.com/p/0ec77136ec48

节点

1. 文档节点（document）：9，对应常量：Node.DOCUMENT_NODE
2. 元素节点（element）：1，对应常量：Node.ELEMENT_NODE
3. 属性节点（attr）：2，对应常量：Node.ATTRIBUTE_NODE
4. 文本节点（text）：3，对应常量：Node.TEXT_NODE
5. 文档片段节点（DocumentFragment）：11，对应常量：Node.DOCUMENT_FRAGMENT_NODE
6. 文档类型节点（DodumentType）：10，对应常量：Node.DOCUMENT_TYPE_NODE
7. 注释节点（Comment）：8，对应常量：Node.COMMENT_NODE

原文链接：https://blog.csdn.net/c62387723sq/article/details/91605698