dom查询其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom查询的剩余方法</title>
<script type="text/javascript">
window.onload = function () {
//获取body元素,数组中的第一个
var body = document.getElementsByTagName("body")[0];
/**
* 在document中有一个属性body,它保存的是body的引用
*/
var body1 = document.body;
console.log(body1===body);//true
console.log(body.nodeType);//1
/**
* document.documentElement保存的是html根标签
*/
var html = document.documentElement;
console.log(html);//html
/**
*document.all获取页面中所有元素,要被淘汰了
* document.getElementBuTagName("*")也是获取页面所有元素
*/
var all = document.all;
var all1 = document.getElementsByTagName("*");
console.log(all1.length===all.length);//true
/**
* 根据元素class属性查询一组元素节点
* getElementByClassName可以根据class属性值获取一组元素节点对象,返回类对象
* 不支持ie8及以下浏览器
*/
var box1 = document.getElementsByClassName("box1");
console.log(box1);
/**
* document.querySelector()
* -需要一个选择器字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
* ie8及以上可以使用，
* 虽然在ie8中没有getElementByClassName方法，但是可以使用querySelector方法代替
* 类选择器放在querySelector（）中,相当于getElementByClassName方法
* 但是querySelector只能查询第一个类名为指定值的元素，返回的不是数组
*/
var div = document.querySelector(".box1");//类选择器
console.log(div.innerHTML);//" 就这"包含前边两个空格
/**
* querySelectAll()用法和querySelector()一样，
* 不同的是，它返回的一个数组，所有class为指定值的元素
*/
var dev1 = document.querySelectorAll(".box1");
console.log(dev1[1].innerHTML);//"还有谁"
}
</script>
</head>
<body>
<div class="box1">
就这
</div>
<div class="box1" >还有谁</div>
</body>
</html>
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
