JavaScript HTML DOM 元素
JavaScript HTML DOM 元素
本章向您讲解如何查找和访问 HTML 页面中的 HTML 元素。
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：
- 通过 id 查找 HTML 元素
- 通过标签名查找 HTML 元素
- 通过类名查找 HTML 元素
- 通过 CSS 选择器查找 HTML 元素
- 通过 HTML 对象集合查找 HTML 元素
通过 id 查找 HTML 元素
DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。
本例查找 id="intro" 的元素：
示例代码：
var myElement = document.getElementById("intro");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>通过 id 查找 HTML 元素</h1>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementsById</b> 方法。</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"来自 intro 段落的文本是：" + myElement.innerHTML;
</script>
</body>
</html>
运行结果：
通过 id 查找 HTML 元素 Hello World! 本例演示 getElementsById 方法。 来自 intro 段落的文本是：Hello World!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。
如果未找到元素，myElement 将包含 null。
通过标签名查找 HTML 元素
本例查找所有 <p> 元素：
示例代码：
var x = document.getElementsByTagName("p");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>通过标签名查找 HTML 元素</h1>
<p>Hello World!</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'第一段中的文本 (index 0) 是：' + x[0].innerHTML;
</script>
</body>
</html>
运行结果：
通过标签名查找 HTML 元素 Hello World! 本例演示 getElementsByTagName 方法。 第一段中的文本 (index 0) 是：Hello World!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素：
示例代码：
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>通过标签名查找 HTML 元素</h1>
<div id="main">
<p>DOM 很有用。</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<p id="demo"></p>
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'“main”中的第一段（索引 0）是：' + y[0].innerHTML;
</script>
</body>
</html>
运行结果：
通过标签名查找 HTML 元素 DOM 很有用。 本例演示 getElementsByTagName 方法。 “main”中的第一段（索引 0）是：DOM 很有用。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
通过类名查找 HTML 元素
如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。
本例返回包含 class="intro" 的所有元素的列表：
示例代码：
var x = document.getElementsByClassName("intro");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>通过类名查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>
</body>
</html>
运行结果：
通过类名查找 HTML 元素 Hello World! DOM 很有用。 本例演示 getElementsByClassName 方法。 class ="intro" 的第一段（索引 0）：DOM 很有用。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。
通过 CSS 选择器查找 HTML 元素
如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。
本例返回 class="intro" 的所有 <p> 元素列表：
示例代码：
var x = document.querySelectorAll("p.intro");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>按查询选择器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>
</body>
</html>
运行结果：
按查询选择器查找 HTML 元素 Hello World! DOM 很有用。 本例演示 querySelectorAll 方法。 class ="intro" 的第一段（索引 0）：DOM 很有用。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。
通过 HTML 对象选择器查找 HTML 对象
本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：
示例代码：
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;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>使用 document.forms 查找 HTML 元素</h1>
<form id="frm1" action="/demo/demo_form.asp">
First name: <input type="text" name="fname" value="Bill"><br>
Last name: <input type="text" name="lname" value="Gates"><br><br>
<input type="submit" value="提交">
</form>
<p>单击“试一试”按钮，显示表单中每个元素的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
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;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
以下 HTML 对象（和对象集合）也是可访问的：
- document.anchors
- document.body
- document.documentElement
- document.embeds
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title
