精解Dom 选择器

最新推荐文章于 2022-09-21 09:23:27 发布

min_dreamer

最新推荐文章于 2022-09-21 09:23:27 发布

阅读量343

点赞数 2

分类专栏： javascript 细谈JavaScript 文章标签： DOM选择器

本文链接：https://blog.csdn.net/qq_41713692/article/details/80620155

版权

javascript 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

细谈JavaScript

21 篇文章 3 订阅

订阅专栏

DOM定义

Dom : 全称 Doncument Object Model

DOM定义了表示和修改文档所需方案。

DOM 对象即为宿主对象。由浏览器的厂商定义，用来操作 html 和 xml 功能的一类对象的集合。也有人称DOM是对html和xml的标准编程接口。DOM不能操作css，但是DOM可以通过html 间接操作css（行间样式），但不能操作css样式表表。

例如：

    var div = document.getElementsByTagName('div')[0];
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'red';

DOM选择器

document 代表整个文档（document是个对象）大于html

DOM选择器主要是查html结构的。

DOM选择器分为：Id选择器、标签名选择器、name选择器、类选择器、css选择器

Id选择器

document.getElementsById()

元素id在ie8以下的浏览器，不区分id的大小写，而且也返回匹配name属性的元素

<!DOCTYPE html>  
<html>  
<head>  
    <title>Dom</title>  
</head>  
<body>  
    <div id = "only">  
</body>  
<script type="text/javascript">  
var div = document.getElementById('only');  
console.log(div);  
</script>  
</html>

标签名选择器

.getElementsByTagName()

用标签名选择器查找的是html文档里的标签，所得到的是类数组形式。（一切由系统生成组的基本上全是类数组）。

<!DOCTYPE html>  
<html>  
<head>  
    <title>Dom</title>  
</head>  
<body>  
    <div id = "only">  
    <div></div>  
    <div></div>  
</body>  
<script type="text/javascript">  
var div = document.getElementsByTagName('div');  
console.log(div);  
</script>  
</html>

name选择器

getElementsByName(); 需注意，只有部分标签name可生效（表单，表单元素，img, iframe），生成的也是一组数。

<!DOCTYPE html>      
<html>  
<head>  
    <title>Dom</title>  
</head>  
<body>  
<input type="" name="myName">  
</body>  
<script type="text/javascript">  
var input = document.getElementsByName('myName');  
console.log(input);  
</script>  
</html>

类选择器

.getElementsByClassName() 通过class属性来获取 ——> ie8和ie8以下的ie版本中没有，可以多个class一起

<!DOCTYPE html>  
<html>  
<head>  
    <title>Dom</title>  
</head>  
<body>  
<div class = "demo"></div>  
</body>  
<script type="text/javascript">  
var div = document.getElementsByClassName('demo');  
console.log(div);  
</script>  
</html>

css选择器

.querySelector() / .querySelectorAll()

通过标签的层级来选择，特别方便，但是缺点很大：唯一的缺点就是不是实时性，是静态的。就是如果你选出来一个元素，如果你下次删除这个元素，在这个选择器上还是有。IE7及IE7以下都没有。

<!DOCTYPE html>  
<html>  
<head>  
    <title>Dom</title>  
</head>  
<body>  
<div>  
    <span>  
        <strong></strong>  
    </span>  
</div>  
</body>  
<script type="text/javascript">  
var strong = document.querySelector('div > span > strong');  
console.log(strong);  
var strong1 = document.querySelectorAll('div > span > strong'); // 选出一组。  
console.log(strong1);  
</script>  
</html>