DOM文档对象模型利用节点访问HTML元素

最新推荐文章于 2022-09-23 16:49:39 发布

lx__angel

最新推荐文章于 2022-09-23 16:49:39 发布

阅读量475

点赞数

CC 4.0 BY-SA版权

文章标签：对象文档 dom html 节点

本文链接：https://blog.youkuaiyun.com/lx__angel/article/details/78739318

本文通过一个具体的HTML页面示例介绍了如何使用JavaScript进行DOM操作。包括选取特定元素、获取元素信息及遍历DOM树等基本操作。同时展示了如何通过按钮触发不同类型的DOM查询，帮助读者更好地理解DOM结构及操作。

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

<html>
	<head>
		<title>00</title>
		
		<style type="text/css">
			#n4{color:red;font-size:30px;}
		</style>
		
		
	</head>
	<body>
	
		<ul id="names">
			<li id="n1">zhangsan</li>
			<li id="n2">lisi</li>
			<li id="n3">wangwu</li>
			<li id="n4">zhaoliu</li>
			<li id="n5">xiaoqiang</li>
			<li id="n6">huzhenhua</li>
		</ul>
		
		<input type="button" value="父节点" onclick="testfather(answer.parentNode)"/><br/><br/>
		
		<input type="button" value="第一个子节点" 
			onclick="testfather(answer.parentNode.firstChild.nextSibling)"/><br/><br/>
		<input type="button" value="上一个子节点"
			onclick="testfather(answer.previousSibling.previousSibling)"/><br/><br/>
		<input type="button" value="下一个子节点"
		    onclick="testfather(answer.nextSibling.nextSibling)"/><br/><br/>
		<input type="button" value="最后一个子节点"
			onclick="testfather(answer.parentNode.lastChild.previousSibling)"/><br/><br/>
		<input type="button" value="得到所有li元素的个数"
			onclick="testcount()"/><br/><br/>
		
		<script type="text/javascript">
			
			var answer=document.getElementById("n4");
		
			function testfather(target){
				alert(target.innerHTML);//输出文本
			}
			
			/*function testcount(target){
				alert(target.getElementByTagName('li').length);
				
			}*/
			function testcount(){
				alert(document.getElementsByTagName("li").length);
			}
		</script>
	
	</body>

</html>