位置:电子教程 > 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>

效果图

小白教程网www.2d5.net

image.png

下面的例子返回包含文档小白教程网中所有 <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>

效果图

小白教程网www.2d5.net

image.png

The getElementsByClassName() Method

如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

document.getElementsByClassName("intro");

上面的例子返回包含 的所有元素的一个列表:

注意:getElementsByClassName() Internet Explorer 5,6,7,8 中无效。



上一篇: HTML DOM 属性 下一篇: HTML DOM - 修改
毕业设计网             广告联系QQ:45157718(微信同号)