HTML DOM

墨蓝 2022-05-31 23:06 147阅读 0赞

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），即DOM。现在就来简单总结一下。

什么是DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

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

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

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

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

（1）节点：

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

1.整个文档是一个文档节点

2.每个 HTML 元素是元素节点

3.HTML 元素内的文本是文本节点

4.每个 HTML 属性是属性节点

5.注释是注释节点

节点树如下图所示：

![20180114194102601][]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML，可以进行如下操作：

1>能够改变页面中的所有 HTML 元素

2>能够改变页面中的所有 HTML 属性

3>能够改变页面中的所有 CSS 样式

4>能够对页面中的所有事件做出反应

（2）方法：

方法是我们可以在节点（HTML元素）上执行的动作，比如添加或修改元素。一些常用的方法如下表：

![20180114194214077][]

（3）属性：

属性是您能够获取或设置的值（比如节点的名称或内容）。

<1>innerHTML属性：可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

<2>nodeName 属性：规定节点的名称。nodeName 是只读的

1.元素节点的 nodeName 与标签名相同

2.属性节点的 nodeName 与属性名相同

3.文本节点的 nodeName 始终是 \#text

4.文档节点的 nodeName 始终是 \#document

<3>nodeValue属性：规定节点的值。

1.元素节点的 nodeValue 是 undefined 或 null

2.文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

<4>nodeType属性：返回节点的类型，是只读的。

比较重要的节点类型有：

![20180114194502984][]

小结：DOM就简单介绍到这里，将其看做一个树型结构还是非常好理解的，要做到灵活运用，一些常用的属性和方法还是需要自己多加练习的。

感谢您的阅读~

[20180114194102601]: /images/20220601/dbe868382c044335a9940d0b264bd04a.png
[20180114194214077]: /images/20220601/ca881424e4f44518b2e4a41b43df0aad.png
[20180114194502984]: /images/20220601/ae7208a5322b40238539b74065ee9698.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

怼烎@/ 2024年04月07日 13:48/ 0 赞/ 32 阅读

相关 HTML Dom对象

什么是 DOM？ DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： > "W3C 文档对象模型（DOM）是中立于平

本是古典何须时尚/ 2023年01月03日 15:29/ 0 赞/ 158 阅读

相关 JavaScript HTML DOM

JavaScript HTML DOM document.getEl（其中document 就是标志 Dom）当网页被加载时，浏览器会创建页面的文档对象模型（Docu

左手的ㄟ右手/ 2022年10月13日 12:51/ 0 赞/ 175 阅读

相关 JavaScript HTML DOM

通过HTML DOM,可访问JavaScript HTML文档中所有的元素。当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)

古城微笑少年丶/ 2022年09月21日 08:22/ 0 赞/ 188 阅读

相关 HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），即DOM。现在就来简单总结一下。什么是DOM？ DOM 是 W3C（万维网联

墨蓝/ 2022年05月31日 23:06/ 0 赞/ 148 阅读

相关 HTML DOM简介

DOM（Document Object Model）是W3C的标准，定义了访问HTML和XML文档的标准。 DOM是文档对象模型的简称，借助DOM模型，可以将结构化文档转换成

﹏ヽ暗。殇╰゛Y/ 2022年05月21日 23:52/ 0 赞/ 155 阅读

相关 HTML DOM

文章目录 HTML DOM 访问DOM节点操作DOM节点示例 HTML DOM > 当网页

迈不过友情╰/ 2022年04月25日 08:54/ 0 赞/ 159 阅读

相关 HTML DOM

一.什么是htmlDOM！ DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型（DOM）

小鱼儿/ 2022年02月01日 00:09/ 0 赞/ 199 阅读

相关 JavaScript HTML DOM

本博客转载: [点击这里][Link 1] HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Mode

傷城~/ 2021年12月01日 14:20/ 0 赞/ 253 阅读

相关 html DOM

在 HTML 中 DOM（文档对象模型）是 Web 前端里最基础、最常用的—模型。例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。 HTM

╰+攻爆jí腚メ/ 2021年10月14日 04:46/ 0 赞/ 312 阅读