DOM 获取标签 获取body 标签 获取html根标签 querySelector querySelectorAll
<!DOCTYPE?html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<title>Document</title>
??<script>
??
????window.onload?=?function(){
??????//?获取body?标签
??????//?var?body?=?document.getElementsByTagName("body")[0];
??????//?console.log(body);
??????//?获取body?标签 ??????var?body?=?document.body; ??????//?获取html根标签 ??????//?var?html?=?document.documentElement; ??????//?console.log(html);
??????//?获取页面所有元素 ??????//?var?all?=?document.all; ??????//?console.log(all);
??????//?根据?class?获取节点对象 ??????//?var?box1?=?document.getElementsByClassName('box1') ??????//?console.log(box1[0]);
??????//?获取页面所有的?div? ??????//?var?div?=?document.getElementsByTagName("div");?? ??????//?console.log(div.length);
??????//?获取?class?为?box1?中的所有的div? ??????//?.box1?div
??????/** ???????*?document.querySelector()? ???????*???可以根据一个css?选择器来查询一个元素节点对象? ???????*???只返回?第一个 ??????*/ ?????var?div?=?document.querySelector(".box1?div");
?????var?box1?=?document.querySelector(".box1");
???????/** ???????*?document.querySelectorAll()? ???????*???可以根据一个css?选择器来查询所有元素节点对象 ???????*????即使?符合?条件的只有一个，?也会返回数组 ??????*/
?????var?boxAll?=?document.querySelectorAll(".box1"); ????//??console.log(div);
????console.log(boxAll);
????}
??</script> ? </head> <body> ??? ??<div?class="box1"> ????<div>?我是box1?中的div1</div> ??</div> ??<div?class="box1"> ????<div>?我是box1?中的div2</div> ??</div> ??<div?class="box1"> ????<div>?我是box1?中的div3</div> ??</div> ??<div></div>
</body> </html>