js获取元素方式详解,学不会的去剁手_js 获取元素

作者：你好赵伟 | 2024-02-19 07:27:41

踩

js 获取元素

一.JS获取DOM元素的方法（8种）

你可以记住,Element加s的是获取集合


/*通过ID获取*/            getElementById
/*通过name属性*/          getElementsByName
/*通过标签名*/            getElementsByTagName  //加了Tag的是获取标签名的
/*通过类名*/              getElementsByClassName
/*获取html的方法*/        document.documentElement
/*获取body的方法*/        document.body
 
/*通过选择器获取一个元素*/        querySelector
/*通过选择器获取一组元素*/        querySelectorAll

//用法
//用集合获取第一个

let box = document.getElementsByClassName('box')[0];

querySelector获取第一个
let li = document.querySelector('选择器');
//let li = document.querySelector('.box');
//let li = document.querySelector('li');
//let li = document.querySelector('#logo');

如果是querySelectorAll获取集合需要遍历

二.querySelectorAll与getElementByTagName的区别

这两个方法都是用来获取元素的DOM方法，不同的是 querySelectorAll 方法返回的是一个 NodeList 节点列表，而 getElementByTagName 方法返回的是一个 HTMLCollection 集合。

两个方法的区别就在于 NodeList 与 HTMLCollection 的区别。

NodeList 是一个静态对象，从捕获到这个对象开始，里面的元素就是固定不变的。
HTMLCollection 是一个动态集合，里面的元素是动态变化的。

这么说可能有些人会一头雾水，举例说明就一目了然了，上代码：


<body>
    <ul id="demo">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        //获取id
        let ul = document.getElementById('demo');
        //获取标签集合
        let get = ul.getElementsByTagName('li');
        // 获取标签集合
        var quer = ul.querySelectorAll('li');
 
        // 插入元素li
        let li1 = document.createElement('li');
        ul.appendChild(li1);
 
        console.log(get.length, quer.length); // 5, 4
 
        // 插入元素
        let li2 = document.createElement('li');
        ul.appendChild(li2);
 
        console.log(get.length, quer.length); // 6, 4
        console.log(get,quer); //打印集合进行比较
    </script>
</body>

querySelectorAll 获取到的是到这个方法执行为止之前的元素，之后即使再有元素变化，quer中始终只有之前的4个元素。而getElementsByTagName则不同，get里面的元素数量是动态变化的，会随着实际元素数量的变化而实时更新。

三.querySelector相比getElement(s)在性能上的区别

首先，getElement(s) By 在性能上是劣势,querySelector在性能上是优势

getElement(s)By 系列获取到的集合是动态的，每次访问都相当于对查询范围内进行一次重新查询，因此就算你避免了死循环，每次访问集合时，它在 DOM 查询这块仍然会消耗不少时间。

querySelectorAll 获取到的是一个"快照"，它在访问时，内容是不会动态更新的，因此它的访问效率必然更快。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】