js 的常用选择器
程序员文章站
2022-10-05 10:59:04
$永远保存学习的心态$ 我是通过标签获取(紫色) 我是通过id获取(橙色) 我是通过class获取(黄色) 我是通过name获取(绿色) 我是通过querySelector获取(青色) 我通过querySelectorAll获取(蓝色) ... ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>$永远保存学习的心态$</title>
</head>
<body>
<div>我是通过标签获取(紫色)</div>
<div id="box">我是通过id获取(橙色)</div>
<div class="box1">我是通过class获取(黄色)</div>
<form action="" name="box2">
我是通过name获取(绿色)
</form>
<div class="box3">
我是通过queryselector获取(青色)
</div>
<div class="box4">我通过queryselectorall获取(蓝色)</div>
<script src="common.js"></script>
<script>
var div = document.getelementsbytagname("div")[0];
//根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的dom对象
//document.getelementsbytagname("标签名字");
var box = document.getelementbyid("box");
//根据id属性的值获取元素,返回来的是一个元素对象
//document.getelementbyid("id属性的值");
var box1 = document.getelementsbyclassname("box1")[0];
//根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的dom对象 (有的浏览器不支持)
//document.getelementsbyname("name属性的值")
var box2 = document.getelementsbyname("box2")[0];
//根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的dom对象 (有的浏览器不支持)
//document.getelementsbyclassname("类样式的名字")
var box3 = document.queryselector('.box3');
//根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)ie8以上支持
//document.queryselector("选择器的名字");
var box4 = document.queryselectorall('.box4')[0];
//根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的dom对象 (有的浏览器不支持)ie8以上支持
//document.queryselectorall("选择器的名字")
div.style.color = '#8b00ff';
box.style.color = '#ff7f00';
box1.style.color = '#ff0';
box2.style.color = '#00ff00';
box3.style.color = '#0ff';
box4.style.color = '#00f';
</script>
</html>
</script>
</body>
</html>