DOM（一）-14-(document获取节点byTagName_2)

最新推荐文章于 2021-07-07 12:07:35 发布

wy_0928

最新推荐文章于 2021-07-07 12:07:35 发布

阅读量649

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47809685

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

【document获取节点byTagName_2】
需求：有几个网站和新闻，希望当单击网站时，在当前页面打开，当单击新闻时，在新标签页打开

思路：当然是要获取其中被操作的超链接对象，但是通过document获取超链接，拿到的是页面中
所有超链接节点，只想获取一部分该怎么办呢？
只要将新闻链接封装到一个div区域中，并加上id即可获取到该div节点，再通过该节点对象获取其内所有新闻链接的超链接节点对象，
然后遍历，在target属性中添加"_blank"即可

==================================================================================

【示例】

<html>
	<head>
	</head>
	
	<body>
		<script type="text/javascript">
		
			function getNodesByTagName(){
			
				//获取超链接所属的div节点，即获取div标签内的节点对象
				var divNode = document.getElementById("newslink");//这一步拿到的是div节点对象divNode
				
				/*
				 *【注意】凡是容器型标签，其内部都有getElementsByTagName方法，便于获取其内部信息，因为容器型标签
				 *内部的标签不一定有id和name，但是一定有标签名。
				 */
				 var aNodes = divNode.getElementsByTagName("a");//这一步拿到的是divNode节点对象中的所有超链接节点对象，返回的是一个数组
				 
				 for(var x=0;x<aNodes.length;x++){
				 	
				 	aNodes[x].target = "_blank";
				 
				 }
				
			}
		
		</script>
		
		<input type="button" value="添加新效果" οnclick="getNodesByTagName()" />
		
		<a href="http://www.baidu.com">(1)百度网站</a>
		<a href="http://www.alibaba.com">(2)阿里网站</a>
		<a href="http://www.qq.com">(3)腾讯网站</a>
		
		<div id="newslink">
		<a href="http://www.xinwen1.com">(4)新闻链接11</a>
		<a href="http://www.xinwen2.com">(5)新闻链接22</a>
		<a href="http://www.xinwen3.com">(6)新闻链接33</a>
		</div>
	</body>
</html>

在单击button后，BAT三大网站依然保持在当前页中打开，而三个新闻链接会在新标签页中打开。

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（一）-14-(document获取节点byTagName_2)

【document获取节点byTagName_2】需求：有几个网站和新闻，希望当单击网站时，在当前页面打开，当单击新闻时，在新标签页打开思路：当然是要获取其中被操作的超链接对象，但是通过document获取超链接，拿到的是页面中所有超链接节点，只想获取一部分该怎么办呢？只要将新闻链接封装到一个div区域中，并加上id即可获取到该div节点，再通过该节点对象获取其内所有新闻链
复制链接

扫一扫