<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom查询</title>
<script type="text/javascript">
window.onload = function(){
// 获取body标签
// var body = document.getElementsByTagName("body")[0];
// console.log(body);
/*
在document中有一个属性body,它保存的是body的引用
*/
var body = document.body;
/*
document.documentElement保存的是html根标签
*/
var html = document.documentElement;
/*
document.all代表页面中所有的元素
*/
var all = document.all;
/*
all = document.getElementsByTagName("*");
这条语句也可以获取页面中所有的标签,根上面的那种写法是等价的
*/
// for(var i=0 ; i<all.length ; i++){
// alert(all[i]);
// }
/*
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象,
但是该方法不支持IE8及以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
console.log(box1);
/*
document.querySelector()
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
- 支持IE8
- 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
console.log(div.innerText);
/*
document.querySelectorAll()
- 该方法和querySelector()用法类似,不同的是,它会把所有符合条件的元素封装成数组返回
- 即使符合条件的元素只有一个,它也会返回数组
*/
}
</script>
</head>
<body>
<div class="box1">
<div>
我是里面的div
</div>
</div>
</body>
</html>
91dom查询
最新推荐文章于 2021-11-19 19:16:58 发布