您的位置：首页 > Web前端 > JavaScript

javascript基础（Dom查询的其他方法：body，documentElement，all，getElementsByClassName()，querySelectorAll()）（二十八）

2017-02-13 08:46 761 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

window.onload = function(){

//获取body标签
//var body = document.getElementsByTagName("body")[0];

//document.body可以用来获取页面中的body元素
var body = document.body;

//document.documentElement可以获取页面的根元素
var root = document.documentElement;

//console.log(root);

/*
* 获取页面中的所有元素
*/
//var all = document.getElementsByTagName("*");
//console.log(all.length);

/*
* document.all
* 	- 可以获取页面的所有的元素
*/
var all = document.all;
//console.log(all[2]);

/*
* document.getElementsByClassName()
* 	- 可以根据class属性值获取一组元素节点对象，
* 		但是该方法不支持IE8及以下的浏览器
*/
//根据class属性值，查询一组元素节点对象
//var box = document.getElementsByClassName("box1");
//console.log(box.length);

/*
* querySelector()
* 	- 该方法可以根据CSS选择器去页面中查找对象
*  - 需要一个选择器的字符串作为参数
* 	- querySelector()只会返回一个符合条件的元素
* 		如果符合条件的元素有多个，它只会返回第一个
*/
var box2 = document.querySelector("#box2");

var box1 = document.querySelector(".box1");

//console.log(box1.innerHTML);

/*
* querySelectorAll()
* 	- 和querySelector()功能类似，都可以根据CSS选择器去查找
*  - 不同的是querySelectorAll()它会将所有符合条件的元素封装到一个数组中返回，
* 		即使查询到的只有一个，也会返回数组
*/
var box1 = document.querySelectorAll(".box1");

console.log(box1.length);

};

</script>
</head>
<body>
<div class="box1">box1</div>
<div class="box1">aaa</div>
<div class="box1">aaa</div>
<div class="box1">aaa</div>

<div id="box2">box2</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom html javascript

相关文章推荐

新的分享

章节导航