深入理解DOM

一、DOM 基本概念

DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面、窗口和文档。

DOM 标准被分为 3 个不同的部分:

1、核心 DOM - 针对任何结构化文档的标准模型

2、XML DOM - 针对 XML 文档的标准模型

3、HTML DOM - 针对 HTML 文档的标准模型

二、DOM 的作用

HTML DOM 树
在这里插入图片描述

DOM基本功能:

① 查询某个元素

② 查询某个元素的祖先、兄弟以及后代元素

③ 获取、修改元素的属性

④ 获取、修改元素的内容

⑤ 创建、插入和删除元素

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

在这里插入图片描述
总结:

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

三、JS 与 DOM

js是代码,html是标记语言

1、在浏览器加载一个页面时,浏览器会解析HTML,并创建文档的一个内部模型,其中包含HTML标记的所有元素,自上而下解析,遇到JavaScript浏览器会检查它的正确性,然后执行代码。

2、JavaScript继续执行,使用DOM检查页面、完成修改、从页面接受事件,或者要求浏览器从Web服务器获取其它数据

注:document是一个反映HTML的对象,通过调用document的方法改变DOM的状态,也就是改变HTML页面

3、JavaScript修改了DOM时,浏览器会随着动态更新页面。

DOM就是一张映射表啦,记录着一堆用代码操控document时的规章制度,直白点说,就是js操作html时的API

猜你喜欢

转载自blog.csdn.net/KevinChen2019/article/details/128288273