006-利用节点关系访问HTML元素

最新推荐文章于 2023-05-13 18:14:09 发布

编码的三叔

最新推荐文章于 2023-05-13 18:14:09 发布

阅读量232

点赞数

分类专栏： DOM详解 DOM详解文章标签：利用节点间关系访问HTML

本文链接：https://blog.csdn.net/ppwwp/article/details/88338333

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

一旦获取了某个HTML元素，由于该元素与DOM树某个节点对应，因此可以利用节点之间的父子、兄弟关系来访问HTML元素。

利用节点关系访问HTML元素的属性和方法如下：

Node Parentnode:返回当前节点的父节点。只读属性。
Node previousSibing:返回当前节点的前一个兄弟节点。只读属性。
Node nextSibing:返回点前节点的后一个兄弟节点。只读属性。
Node[] childNodes:返回当前节点的所有子节点。只读属性
Node[] getElementBytagName(tagName):返回当前节点的具有指定标签名的所有子节点。
Node firstChild:返回当前节点的第一个子节点。只读属性。
Node LastChild:返回当前节点最后一个子节点。只读属性。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"/>
		<title>根据节点关系访问HTML元素</title>
		<style type="text/css">
			/* 定义改变背景色的CSS,表示被选中的项 */
			.selected{
					background-color:#66f ;
			}
		</style>
	</head>
	<body>
		<ol id="books">
			<li id="java">java</li>
			<li id="ssh">ssh</li>
			<li id="ajax">ajax</li>
			<li id="xml">xml</li>
			<li id="ejb">ejb</li>
			<li id="android">android</li>
		</ol>
		<input type="button"  value="父节点" onclick="change(curTarget.parentNode);"/>
		<input type="button"  value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
		<input type="button"  value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
		<input type="button"  value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
		<input type="button"  value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
		<script type="text/javascript">
			var curTarget = document.getElementById("ajax");
			var change = function(target){
				alert(target.innerHTML);
			}
		</script>
	</body>
</html>

在这里插入图片描述
从上面的例子来看的话是有很多疑问的。比如访问上一个节点为什么previousSibling两次，当访问最后一个节点的时候为什么还需要previousSibling一次呢？

原因就是 <ol……/> 节点一共包括13个子节点而不是6个。因为在每个<li……/>节点之间都会有一片“空白”（换行和空格），每片“空白”也将被当成<ol……/>元素的子节点。因为在使用curTarget.previousSibing访问当前节点的上一个节点时，实际上得到一个“空白”节点；此处需要访问上一个<li……/>节点，实际上是两个节点。

注意点：
对于HTML页面而言，浏览器会将元素之间的“空白”也当成文本节点，在使用DOM模型访问HTML页面元素时必须小心处理。

早期的IE浏览器，比如IE8以前的浏览器并不会把元素之间的“空白”当成子元素。但主流的浏览器，包括最近的浏览器都会把元素之间的“空白”也当成子元素。

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
006-利用节点关系访问HTML元素

一旦获取了某个HTML元素，由于该元素与DOM树某个节点对应，因此可以利用节点之间的父子、兄弟关系来访问HTML元素。利用节点关系访问HTML元素的属性和方法如下：Node Parentnode:返回当前节点的父节点。只读属性。Node previousSibing:返回当前节点的前一个兄弟节点。只读属性。Node nextSibing:返回点前节点的后一个兄弟节点。只读属性。Node...
复制链接

扫一扫