JavaScript：parentNode

  • parentNode返回父节点，不包含文本节点，下面获取<a>标签的父节点
<body>
<ul id='ul1'>
	<li>第一行<a href="javascript:">隐藏</a></li>
	<li>第二行<a href="javascript:">隐藏</a></li>
	<li>第三行<a href="javascript:">隐藏</a></li>
	<li>第四行<a href="javascript:">隐藏</a></li>
	<li>第五行<a href="javascript:">隐藏</a></li>
</ul>
</body>

  • parentNode简单应用：隐藏<li>标签
<!DOCTYPE html>
<html>
<head>
	<title>learn js</title>
<style type="text/css">
	div{
		width: 100px;
		height: 30px;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var aA = document.getElementsByTagName('a');
		for (var i = aA.length - 1; i >= 0; i--) {
			aA[i].onclick = function(){
				this.parentNode.style.display = 'none';
			};
		}
	};
</script>
</head>

<body>
<ul id='ul1'>
	<li>第一行<a href="javascript:">隐藏</a></li>
	<li>第二行<a href="javascript:">隐藏</a></li>
	<li>第三行<a href="javascript:">隐藏</a></li>
	<li>第四行<a href="javascript:">隐藏</a></li>
	<li>第五行<a href="javascript:">隐藏</a></li>
</ul>
</body>
</html>

 当点击<a>标签时，隐藏其父节点标签，也就是<li>

posted @ 2020-02-09 15:34  昨夜昙花  阅读(35)  评论(0)    收藏  举报