 |
位置：电子教程 > HTML DOM 教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML DOM 教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| HTML DOM 节点 |
| HTML DOM 方法 |
| HTML DOM 属性 |
| HTML DOM 访问 |
| HTML DOM - 修改 |
| HTML DOM - 元素 |
| HTML DOM - 事件 |
| HTML DOM 导航 |
| HTML DOM 总结 |
| 当前阅读教程：HTML DOM 教程 > HTML DOM 访问 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： HTML DOM 属性 | 下一篇： HTML DOM - 修改 |
|
访问 HTML DOM - 查找 HTML 元素。 访问 HTML 元素（节点）访问 HTML 元素等同于访问节点 您能够以不同的方式来访问 HTML 元素： l 通过使用 getElementById() 方法 l 通过使用 getElementsByTagName() 方法 l 通过使用 getElementsByClassName() 方法 getElementById() 方法getElementById() 方法返回带有指定 ID 的元素引用： 语法 node.getElementById("id"); 下面的例子获取 id="intro" 的元素： document.getElementById("intro"); getElementsByTagName() 方法getElementsByTagName() 返回带有指定标签名的所有元素。 语法 node.getElementsByTagName("tagname"); 下面的例子返回包含文档中所有 <p> 元素的列表： 实例 1 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName() 方法(2d5.net小白教程网)</title>
</head>
<body>
<p id="info1">黄菊华老师</p>
<p id="info2">hello world</p>
<p>这个实例演示了 getElementsByTagName 方法的使用。</p>
<script>
x = document.getElementsByTagName("p");
document.write("第一个段落的文本为: " + x[0].innerHTML);
</script>
</body>
</html>效果图
下面的例子返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：
实例 2 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName() 方法(2d5.net小白教程网)</title>
</head>
<body>
<p>黄菊华老师</p>
<div id="main">
<p>hello world</p>
<p>这个实例演示了 getElementsByTagName 方法的使用。</p>
</div>
<script>
x = document.getElementById("main").getElementsByTagName("p")
document.write("div 中的第一个段落为: " + x[0].innerHTML);
</script>
</body>
</html>效果图
The getElementsByClassName() Method如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法： document.getElementsByClassName("intro"); 上面的例子返回包含 的所有元素的一个列表： 注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。 |
|
| 上一篇： HTML DOM 属性 | 下一篇： HTML DOM - 修改 |
