本页教您如何查找和访问 HTML 元素 HTML 页面。
通常,您希望使用 JavaScript 来操作 HTML 元素。
为此,您必须首先找到元素。做这件事有很多种方法:
通过id查找HTML元素
通过标签名称查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单方法是使用元素 id。
此示例查找带有 id="intro"
的元素:
const element = document.getElementById("intro");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;
</script>
</body>
</html>
如果找到该元素,该方法将返回该元素作为对象(在元素中)。
如果未找到该元素,则该元素将包含 null
。
此示例查找所有 <p>
元素:
const element = document.getElementsByTagName("p");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id="demo"></p>
<script>
const element = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;
</script>
</body>
</html>
此示例查找带有 id="main"
的元素,然后查找所有 <p>
元素 在 "main"
内:
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>
<p id="demo"></p>
<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
</script>
</body>
</html>
如果要查找具有相同类名的所有 HTML 元素,请使用 getElementsByClassName()
。
此示例返回包含 class="intro"
的所有元素的列表。
const x = document.getElementsByClassName("intro");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
<p id="demo"></p>
<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>
</body>
</html>
如果要查找与指定 CSS 选择器匹配的所有 HTML 元素 (id、类名、类型、属性、属性值等),使用 querySelectorAll()
方法。
此示例返回所有具有 class="intro"
的 <p>
元素的列表。
const x = document.querySelectorAll("p.intro");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>
</body>
</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;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>These are the values of each element in the form:</p>
<p id="demo"></p>
<script>
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;
</script>
</body>
</html>
还可以访问以下 HTML 对象(和对象集合):
文档.锚点
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.anchors</h2>
<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>
</body>
</html>
文档正文
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
文档.文档元素
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
文档.embeds
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>
</body>
</html>
文件.表格
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.forms</h2>
<form action="">
First name: <input type="text" name="fname" value="Donald">
<input type="submit" value="Submit">
</form>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>
</body>
</html>
文件头
<!DOCTYPE html>
<html>
<head>
<title>W3Schools Demo</title>
</head>
<body>
<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.head;
</script>
</body>
</html>
文档.图像
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.images</h2>
<img src="pic_htmltree.gif" width="486" height="266">
<img src="pic_navigate.gif" width="362" height="255">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>
</body>
</html>
文档.链接
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.links</h2>
<p>
<a href="/html/default.asp">HTML</a>
<br>
<a href="/css/default.asp">CSS</a>
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>
</body>
</html>
文档.脚本
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.scripts</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>
</body>
</html>
文件名
<!DOCTYPE html>
<html>
<head>
<title>W3Schools Demo</title>
</head>
<body>
<h2>Finding HTML Elements Using document.title</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>
</body>
</html>