码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript HTML DOM 元素

❮ 上一节 下一节 ❯

本页教您如何查找和访问 HTML 页面中的 HTML 元素。

查找 HTML 元素

通常，您希望使用 JavaScript 来操作 HTML 元素。

为此，您必须首先找到元素。做这件事有很多种方法：

  • 通过id查找HTML元素
  • 通过标签名称查找 HTML 元素
  • 通过类名查找 HTML 元素
  • 通过 CSS 选择器查找 HTML 元素
  • 通过 HTML 对象集合查找 HTML 元素

通过 ID 查找 HTML 元素

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

此示例查找具有以下内容的元素id="intro"：

示例

const element = document.getElementById("intro");
亲自试一试 »

如果找到该元素，该方法将返回该元素作为对象（在元素中）。

如果未找到该元素，则该元素将包含null。

通过标签名称查找 HTML 元素

这个例子找到了所有<p>要素：

示例

const element = document.getElementsByTagName("p");
亲自试一试 »

此示例查找具有以下内容的元素id="main"，然后找到所有<p>里面的元素"main"：

示例

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
亲自试一试 »

通过类名查找 HTML 元素

如果要查找具有相同类名的所有 HTML 元素，请使用getElementsByClassName()。

此示例返回所有元素的列表class="intro"。

示例

const x = document.getElementsByClassName("intro");
亲自试一试 »

通过 CSS 选择器查找 HTML 元素

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

此示例返回所有的列表<p>元素与class="intro"。

示例

const x = document.querySelectorAll("p.intro");
亲自试一试 »

通过 HTML 对象集合查找 HTML 元素

此示例查找表单元素id="frm1"，在表单集合中，并显示所有元素值：

示例

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
亲自试一试 »

还可以访问以下 HTML 对象（和对象集合）：

通过练习测试一下

练习:

使用getElementById方法来找到 <p>元素，并将其文本更改为 "Hello"。

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

<script>
 = "Hello";
</script>

开始练习

❮ 上一节 下一节 ❯