HTML DOM（文档对象模型）详细讲解

#Code_kai

已于 2022-01-25 15:47:59 修改

阅读量1.7k

点赞数 4

分类专栏： Javascript 文章标签： html javascript 前端

于 2022-01-18 10:43:27 首次发布

本文链接：https://blog.csdn.net/qq_53016083/article/details/122554241

版权

本文详细介绍了HTML DOM的概念及其在JavaScript中的应用，包括通过ID、标签名和类名查找HTML元素，改变HTML内容和CSS，以及事件处理。重点讲述了如何使用addEventListener方法添加和移除事件监听器，以及事件冒泡和捕获的概念。

摘要由CSDN通过智能技术生成

HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

1.HTML DOM (文档对象模型)

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
HTML DOM 模型被构造为对象的树：

DOM HTML tree

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

2.HTML DOM 查找 HTML 元素

有三种方法来做这件事：

通过 id 找到 HTML 元素
通过 标签名 找到 HTML 元素
通过 **类名 **找到 HTML 元素

Ⅰ.通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id属性，返回一个标签的对象

通过 X(document).getElementById 方法

<p id="intro">你好世界!</p>

<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

Ⅱ.通过标签名查找 HTML 元素

本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 p 元素：

通过 X(document或某个元素对象).getElementsByTagName 方法

<p>你好世界!</p>
<div id="main">
<p> a1 </p>
<p> a2 </p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p"); //返回一个p标签的数组
document.write('id="main"元素中的第一个段落为：' + y[1].innerHTML);
</script>

Ⅲ.通过类名找到 HTML 元素

通过 X(document或某个元素对象).getElementsByClassName 方法

<p class="intro">你好世界!</p>
<p> a1 </p>
    
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>

3.HTML DOM 改变 HTML 内容

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

Ⅰ.改变 HTML 输出流

JS中，document.write() 方法，可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

Ⅱ.改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

<html

最低0.47元/天解锁文章

#Code_kai

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM（文档对象模型）详细讲解

1. HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。2. 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。3. 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
复制链接

扫一扫