DOM 获取标签获取body 标签获取html根标签 querySelector querySelectorAll

织梦狗教程前端开发

2023-10-27

!DOCTYPE?htmlhtml?lang=enhead??meta?charset=UTF-8??meta?http-equiv=X-UA-Compatible?content=IE=edge??meta?name=viewport?content=width=device-width,?initial-scale=1.0??tit...

<!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>

织梦狗教程

本文标题为：DOM 获取标签获取body 标签获取html根标签 querySelector querySelectorAll