JS中DOM查询的剩余方法

最新推荐文章于 2024-12-05 16:34:31 发布

原创最新推荐文章于 2024-12-05 16:34:31 发布 · 218 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

JS基础学习专栏收录该内容

78 篇文章

订阅专栏

本文介绍如何使用JavaScript通过不同方法获取DOM元素，包括直接获取body和html标签、按class和tag名称查询元素等，并探讨了兼容性和选择器的使用。

获取body标签，可以使用document的body属性。

//获取body标签
//var body = document.getElementsByTagName("body")[0];//这里的[0]表示把数组里的第一个元素取出来
/* 
 在documentt中有一个属性body，body就保存在里面
*/
var body = document.body;
console.log(body);

获取html根标签，可以使用document的documentElement属性。

//想要获取html根标签，可以用document.documentElement，里面保存的就是html这个根标签
var html = document.documentElement;
console.log(html);

获取网页中存在的所有元素，可以用document的all属性，使用document.all获取，返回的是一个数组，需要使用遍历来取出数组里面的元素。

//document.all代表页面中存在的所有的元素
var all = document.all;
//console.log(all.length);
for(i = 0; i < all.length; i++){
   console.log(all[i]);
}

根据元素的class属性来查询元素节点对象，getElementsByClassName可以根据class属性来获取一组元素节点对象，但是它不支持ie8及以下版本的浏览器，在不兼容的情况先能用，在考虑兼容的情况下不推荐使用这个方法，返回的是一个数组。
```
/* 
根据元素的class属性值来查询元素节点对象
*/
var box = document.getElementsByClassName("box");
console.log(box.length);
```

获取页面里存在的所有div元素。

var divs = document.getElementsByTagName("div");
for(i = 0; i < divs.length; i++){
   console.log(divs[i]);
}

获取对应class属性div下的所有子div，document.querySelector需要一个选择器的字符串作为参数，可以根据css选择器来查询一个元素节点对象。使用querySelector方法，它总会返回一个唯一的元素，如果满足条件的元素有多个，它只会返回第一个。

此方法支持ie8及以上的版本，可用此方法来代替getElementsByClassName获取对应classs属性的元素节点对象。

<!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 type="text/javascript">
        window.onload = function(){

            //获取class=box下的所有div
            //.box div,这种方法是css选择器来获取class=box下的div
            /* 
            document.querySelector需要一个选择器的字符串作为参数,可以根据css选择器来查询一个			 元素节点对象
            使用querySelector方法，它总会返回一个唯一的元素，如果满足条件的元素有多个，它只会				返回第一个
            */

            var div = document.querySelector(".box div");
            //console.log(div.innerHTML);

            var box = document.querySelector(".box");//此方法支持ie8及以上的版本，可用			此方法来代替getElementsByClassName
            //console.log(box);
    	};
	</script>

</head>
<body>
        <div class="box">
            <div>我是第一个box中的div</div>
        </div>
        <div class="box">
            <div>我是第二个box中的div</div>
        </div>
        <div class="box">
            <div>我是第三个box中的div2</div>
        </div>
        <div></div>
</body>
</html>

查询所有符合条件的元素节点对象，可以使用querySelectorAll()方法，它和querySelector()方法一样，不同的是，它会将符合条件的元素封装到一个数组中返回

如果符合条件的元素只有一个，它也会将获取到的元素封装到一个数组中返回

/* 
querySelectorAll()方法和querySelector()方法一样，不同的是，它会将符合条件的元素封装到一个数组中返回
如果符合条件的元素只有一个，它也会将获取到的元素封装到一个数组中返回
*/
var box1 = document.querySelectorAll("box");
console.log(box1);