常用选择标签的方式

最新推荐文章于 2022-09-23 16:56:17 发布

weixin_41544553小彩虹

最新推荐文章于 2022-09-23 16:56:17 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签：基本选择器关系选择器 js

本文链接：https://blog.csdn.net/weixin_41544553/article/details/88134704

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

基本选择器：

id名：document.getElementById('btn')
标签名：document.getElementsByTagName('button');
类名：document.getElementsByClassName('one'); 类数组

关系选择器：

（1）选择父级标签:标签.parentNode

（2）选择子级标签：标签.children 类数组

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<ul id="wrap">
			<li ></li>
		</ul>

		<ul id="box">
			<li ></li>
			<li ></li>
			<li ></li>
			<li ></li>
			<li ></li>
			<li ></li>
			<li ></li>
			<li ></li>
		</ul>


		<script>
			var obox=document.getElementById('box');
			// obox.parentNode.parentNode.style.background='red'
			// obox.children[0].style.background='red'
			var child=obox.children;
			for(var i=0;i<child.length;i++){
				child[i].onclick=function(){
					this.style.border='1px solid red'
				}
			}

		</script>
	</body>
</html>

<!-- 
	id名：document.getElementById('btn')
	标签名：document.getElementsByTagName('button');
	类名：document.getElementsByClassName('one'); 类数组
	关系选择器：
	选择父级标签:标签.parentNode
	选择子级标签：标签.children  类数组



 -->

weixin_41544553小彩虹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用选择标签的方式

基本选择器： id名：document.getElementById('btn') 标签名：document.getElementsByTagName('button'); 类名：document.getElementsByClassName('one'); 类数组关系选择器：（1）选择父级标签:标签.parentNode（2）选择子级标签...
复制链接

扫一扫