找到元素的另外两种方法
2019-05-13 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 找到元素的另外两种方法 </title>
<!--
css选择器也能找到元素，还比较方便
我JS里能不能也用css的选择器来找到元素呢？
以下两个方法，就是让你可以用css选择器来找到某些元素
document.querySelector:
这个方法，传入css选择器，但是哪怕匹配多个，也永远只会找到第一个
也就是说，它返回的绝对是对象，或者是null
document.querySelectorAll：
这个方法，传入的也是css选择器，但是会匹配所有选择器能找到
选择器找到几个，它就得到几个
这个方法无论如何返回的都是伪数组，哪怕找不到也是返回长度为0的伪数组
这两个方法有兼容问题 -->
</head>
<body>
<div class="box"></div>
<div id="myD"></div>
<div>div3</div>
<span class="box">我是span</span>
<div>
<p>我是div里的p</p>
</div>
<p>外面的p</p>
<script>
// document.querySelector:传入css选择器,只会找到第一个;
var box = document.querySelector('.box');
console.log(box); // <div class="box"></div>
var box1 = document.querySelector('span,box');
console.log(box1); // <span class="box">我是span</span>
var p = document.querySelector('div p');
console.log(p); // <p>我是div里的p</p>
var p1 = document.querySelector('body > p');
console.log(p1); // <p>外面的p</p>
// document.querySelectorAll：传入的也是css选择器,但是会匹配所有选择器;
var divList = document.querySelectorAll('div');
console.log(divList); // NodeList(4) [div.box, div#myD, div, div]
var pList = document.querySelectorAll('span,p');
console.log(pList); // NodeList(3) [span.box, p, p]
</script>
</body>
</html>
