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

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>