JS DOM简介及如何查找元素

最新推荐文章于 2024-04-12 10:37:55 发布

人偶Q

最新推荐文章于 2024-04-12 10:37:55 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/RenOuQ/article/details/105485238

版权

HTML DOM（文档对象模型）

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

什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

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

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

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

DOM 方法

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
例：

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

在上面的例子中，getElementById 是方法，而 innerHTML 是属性。

getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 html 标签和 body标签。

查找 HTML 元素

通过 id 查找 HTML 元素

DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。
例

var myElement = document.getElementById("intro");

通过标签名查找 HTML 元素

例

var x = document.getElementsByTagName("p");

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

通过类名查找 HTML 元素

如果需要找到拥有相同类名的所有 HTML 元素，使用 getElementsByClassName()。
例

var x = document.getElementsByClassName("intro");

通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。

通过 CSS 选择器查找 HTML 元素

如果需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，使用 querySelectorAll() 方法。

例

var x = document.querySelectorAll("p.intro");

querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。

通过 HTML 对象选择器查找 HTML 对象

例

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

人偶Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS DOM简介及如何查找元素

HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）什么是 DOM？DOM 是一项 W3C (World Wide Web Consortium) 标准。DOM 定义了访问文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”W3C DOM ...
复制链接

扫一扫