DOM 常用的选择器的[集合]和[解释]

最新推荐文章于 2022-10-12 10:51:41 发布

原创最新推荐文章于 2022-10-12 10:51:41 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

dom 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在ES6之前和之后，JavaScript中用于选取HTML元素的DOM选择器的不同方法。ES6之前，我们使用`getElementsByClassName`、`getElementById`、`getElementsByTagName`和`getElementsByName`等方法。而在ES6之后，`querySelector`和`querySelectorAll`的引入提供了更简洁的选择器语法，能够更方便地根据ID、类名、标签名选取元素。例如，`querySelector('#box')`用于选取id为'box'的元素，而`querySelectorAll('.box')`则可以获取所有class为'box'的元素。

DOM选择器在ES6之前有一种写法在ES6出来后又推出了一种新的写法 ,下面就让我们一起来了解一下这两种选择器

ES6前:

document.getElementsByClassName('box');

//作用:通过class类名获取html元素

//参数:class值类型字符串

//返回值 html集合如果没有,集合长度为0;

<div class="box"></div>
    <script>
        var box=document.getElementsByClassName('box');
    </script>

document.getElementById('box');

//作用:通过id属性获取html元素对象;

//参数:id值

//返回值:有元素返回选中的对象没有null

  <div id="box"></div>
    <script>
        var box=document.getElementById('box');
    </script>

document.getElementsByTagName('h1');

//作用:通过标签属性获取html元素对象;

//参数:标签名标签字符串

//返回值:html集合如果没有,集合长度为0;

<h1></h1>
    <script>
        var h1=document.getElementsByTagName('h1');
    </script>

name=document.getElementsByName('user');

//作用:通过name属性获取html元素对象;

//参数:name属性值

//返回值:html集合如果没有,集合长度为0;

<input type="text" name="user">
    <script>
        var user=document.getElementsByName('h1');
    </script>

ES6后出来了这两个选择器

querySelector(' '),

document.querySelectorAll(' ')

//dom 语法

//document.api()

 <div id="box"></div>
    <script>
        var user=document.querySelector('#box'); //获取id选择器的
        
    </script>

<div class="box"></div>
    <script>
        var user=document.querySelector('.box'); //获取类选择器的
         
    </script>

  <div></div>
    <div></div>
    <div></div>
    <script>
        var user=document.querySelectorAll('div');   //获取所有div标签的
    </script>

<div></div>
    <div></div>
    <div></div>
    <script>
        var user=document.querySelectorAll('div')[0];  //获取所有div中第一个div的 第一个索引为0,依次累加
    </script>