DOM 获取标签 获取body 标签 获取html根标签 querySelector querySelectorAll
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>