DOM对HTML元素的两种访问操作

最新推荐文章于 2022-06-07 18:50:25 发布

Daisy-lv

最新推荐文章于 2022-06-07 18:50:25 发布

阅读量752

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36747861/article/details/84328722

本文介绍了如何使用JavaScript通过ID访问HTML元素，以及如何利用节点关系进行元素访问。包括getElementById方法的使用，和通过parentNode、previousSibling、nextSibling等属性访问元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.通过ID访问，即document.getElementById();

id具有唯一性

例如如下代码：

<!DOCTYPE html>
<html>
<head>
	<title>使用getElementById方法查找元素</title>
	<script type="text/javascript">
		function showContent(){
			var myDiv,textName,btn_show;
			with(document){
				myDiv=getElementById("myDiv");
				textName=getElementById("textName");
				btn_show=getElementById("btn_show");
			}
			alert(myDiv.innerHTML+"\n"+textName.value+"\n"+btn_show.value);
		}
	</script>
</head>
<body>
     <div id="myDiv">我的div块</div>
     <textarea id="content" rows="2",cols="16">秋水共长天一色</textarea><br/>
     <input type="text" id="textName" value="Daisy"><br/>
     <input type="button" id="btn_show" value="输出以上三个元素的内容" onclick="showContent()"/>
     <!--onclick给按钮绑定一个事件-->
    
</body>
</html>

2.利用节点关系访问HTML元素

常用的属性及方法如下所示:

parentNode	返回当前节点的父节点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
childNodes	返回当前节点的所有子节点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点最后一个子节点
getElementByTagName(tagName)	返回当前节点的指定节点的所有子节点

示例如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#a4{color: pink;}
	</style>
</head>
<body>
     <ul id="names">
     	 <li id="a1">可爱的</li>
     	 <li id="a2">乐观的</li>
     	 <li id="a3">自信的</li>
     	 <li id="a4">坚强的</li>
     	 <li id="a5">努力的</li>
     	 <li id="a6">认真的</li>
     </ul>
     <input type="button" value="父节点" onclick="showContent(rr.parentNode)"/>
     <input type="button" value="第一个子节点" onclick="showContent(rr.parentNode.firstChild.nextSibling)"/>
     <input type="button" value="上一个节点"  onclick="showContent(rr.previousSibling.previousSibling)"/>
     <input type="button" value="下一个节点" onclick="showContent(rr.nextSibling.nextSibling)"/>
     <input type="button" value="最后一个子节点" onclick="showContent(rr.parentNode.lastChild.previousSibling)"/>
     <input type="button" value="得到所有的li元素的个数" onclick="showCount()"/>
     <!--js是一种弱类型语言，从上而下执行，这段代码要放在要操作的html内容下面-->
     <script type="text/javascript">
     	var rr=document.getElementById("a4");
     	function showContent(target){
     		alert(target.innerHTML);
     	}
     	function showCount(){
     		alert(document.getElementsByTagName("li").length);
     	}
     </script>
</body>
</html>