写效果练习时,碰到一个奇怪的效果,先记录一下,稍后有空再仔细研究,看到的有明白原理机制的小伙伴,也欢迎指教。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
<div class="div3"></div>
</div>
<script>
var div2 = document.querySelector(".div2");
var div = div2.querySelectorAll(".div1 .div3");
// var div = div2.querySelectorAll(".div1 > .div3");
// var div = document.querySelectorAll(".div1 > .div3");
// var div = div2.querySelectorAll(":scope .div1 .div3");
console.log(div.length); // length 的值各不相同,与我之间对选择器的理解有所不同
</script>
</body>
</html>
网友评论