<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<Script>
window.onload = function(){
/*
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象
但是该方法不支持IE8及以下的游览器
*/
var box1 = document.getElementsByClassName('box1');
console.log(box1.length);
/* 获取class为box1中所有的div
document.querySelector()
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
- 虽然IE8中没有getElementsByClassName()但是可以用querySelector()代替
- 使用该方法,它总会返回唯一的一个元素,如果满足的条件元素有多个,那么它只会返回第一个.
*/
var div = document.querySelector(".box1 div");
console.log(div.length, div.innerHTML);
for (var i=0; i<div.length; i++){
console.log(div[i].innerHTML);
}
// document.querySelectorAll()
// 该方法与querySelector类似,不同的是它会将符合条件的元素封装到一个数组中返回.
// 即时符合条件的元素只有一个,它也会返回数组.
var divs = document.querySelectorAll(".box1 div");
console.log(divs.length, div.innerHTML);
for (var i=0; i<divs.length; i++){
console.log(divs[i].innerHTML);
}
};
</Script>
</head>
<body>
<div>
<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>
</body>
</html>
