JavaScriptDOM树_dome tree-优快云博客

本文链接：https://blog.youkuaiyun.com/Unfortunatelyif/article/details/103849223

本文深入解析DOM树结构，介绍核心DOM与HTMLDOM的区别，详细讲解常用的节点API，如parentNode、previousSibling、nextSibling等，并提供实际代码示例。同时，文章还介绍了多种查找DOM元素的方法，包括按id、标签名、name属性和class属性查找。

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

DOM树原型图为
在这里插入图片描述

DOM

DOM分为核心的DOM和HTML DOM
核心DOM：能操作所有结构文档；
HTML DOM 是常用的API 操作HTML内容

常用的节点API

p.parentNode 获得p的父节点
p.previousSibling 返回当前节点的前一个兄弟节点
p.nextSibling 返回当前节点的下一个兄弟节点
p.previousElementSibling 返回当前元素的前一个兄弟
元素 p.nextElementSibling 返回当前元素的下一个兄弟元素

	<div>
		<p></p>
		<i></i>
		<span></span>
		<h1></h1>
		<a href=""></a>
	</div>
<script>
var span = document.getElementsByTagName('span')[0];
		var dome1 = span.parentNode;
		var dome2 = span.previousSibling;
		var dome3 = span.nextSibling;
		var dome4 = span.previousElementSibling;
		var dome5 = span.nextElementSibling;
		console.log(dome1);  
		console.log(dome2); 
		console.log(dome3); 
		console.log(dome4); 
		console.log(dome5);
</script>

结果为
在这里插入图片描述

查找符合的元素对象

1，按id查找：document.getElementById('div') 返回一个元素
2, 按标签名查找：document.getElementsByTagName("div") 返回一个集合;
3，按name属性查找： document.getElementsByName("tetx")；返回一个动态数组；
4，按class属性查找： nav.getElementsByClassName("box"); 返回一个集合（IE浏览器低版本不兼容）

<body>
	<div id="div"></div>
	<i></i>
	<i></i>
	<i></i>
	<h1 class="box"></h1>
	<input type="password" name="pwd">
	<script>
		//按id查找
		var div = document.getElementById('div');
		//按标签名查找
		var i = document.getElementsByTagName("i");
		//按name属性查找
		var pwd document.getElementsByName("pwd");
		//按class属性查找
		var h = nav.getElementsByClassName("box"); 
	</script>
</body>