02前端基础----DOM

一、DOM是什么？

DOM（Document Object Model）：文档对象模型，它允许脚本(js)控制Web页面、窗口和文档，是HTML和XML文档的编程接口；它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

二、DOM有什么用？

DOM：文档对象模型，注意关键字：”模型“是说明描述整个文档对象的。DOM树结构如下：

DOM基本功能：
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素

按照不同的类型来分，dom有不同的节点：文档节点、元素节点、属性节点、文本节点、注释节点：

总的来说，
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
 

三、JS和DOM有什么关系？

 js是代码，html是标记语言哦
想要做成动态页面，肯定要用到js了，管你是vue还是ng还是什么的。
DOM的妙处在于：它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。
1、在浏览器加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记的所有元素，自上而下解析，遇到JavaScript浏览器会检查它的正确性，然后执行代码。
2、JavaScript继续执行，使用DOM检查页面、完成修改、从页面接受事件，或者要求浏览器从Web服务器获取其它数据
注：document是一个反映HTML的对象，通过调用document的方法改变DOM的状态，也就是改变HTML页面
3、JavaScript修改了DOM时，浏览器会随着动态更新页面。
DOM就是一张映射表啦，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API

声明:本文根据七色花姐姐博客整理，附上原文链接：https://blog.csdn.net/u012155729/article/details/78135393