通过查询节点对象来获取标签对象

最新推荐文章于 2023-01-31 15:19:44 发布

\u5f20\u7231\u9648

最新推荐文章于 2023-01-31 15:19:44 发布

阅读量306

点赞数

本文链接：https://blog.csdn.net/family_love_1998/article/details/89843171

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过查询节点对象来获取标签对象</title>
		
		<!--
			 节点关系：
			   1)parentNode:父节点
			   2)childNodes:当前的所有子节点
			   3)firstChild:第一个子节点
			   4)lastChild:最后一个子节点
			   5)兄弟节点：sibling
		           nextSibling:下一个兄弟节点
			       previousSibling:上一个兄弟节点
			       
		    在节点关系：childNodes,firstChild,lastChild,有一个节点的类型
		 nodeType查看节点类型
		                   空格换行：3         #test
		                   标签对象：1         
		       html注释：8       #comment
		       
	    -->
			 
	</head>
	<body>
		<form><a href="#"></a><!--html注释--><input type="text" /><input type="button" /></form>
		<form>
			<a href="#"></a><img src="" /><input type="button" />
		</form>
	</body>
	<script>
		//需求1：需要获取第一个a标签对象
		/*var aNode = document.links[0];
		alert(aNode.nodeName);
		//需求2：需要获取它的父节点对象
		var formNode = aNode.parentNode;
		alert(formNode.nodeName);
		//需求3：需要获取当前第一个form标签对象的所有子节点对象
		var nodeList = formNode.childNodes;
		alert(nodeList.length);
		for(var i=0;i<nodeList.length;i++){
			if(nodeList[i].nodeType==1){
				document.write(nodeList[i].nodeName+
				",节点类型是:"+nodeList[i].nodeType+"<br/>");
			}
		}
		//需求4：通过formNode获取第一个子节点对象
		var firstNode = formNode.firstChild;
		alert(firstNode.nodeName);
		//需求5：通过formNode获取最后一个子节点对象
		var lastNode = formNode.lastNodes;
		alert(lastNode.nodeName);*/
		
		//获取第二个a标签对象
		var aNode = document.links[1];
		alert(aNode.nodeName);
		//获取aNode的下一个兄弟节点
		var next = aNode.nextSibling;
		alert(next.nodeName);
		//获取上一个兄弟节点
		var previous = next.previousSibling;
		alert(previous.nodeName);
		
	</script>
</html>

\u5f20\u7231\u9648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过查询节点对象来获取标签对象

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>通过查询节点对象来获取标签对象</title> <!-- 节点关系： 1)parentNode:父节点 2)childNodes:当前的所有子节点...
复制链接

扫一扫