1、引言

在练习蓝桥杯的题目的时候，对dom的操作很多，其中最为频繁的当属获取页面中的真实dom了，但是在做题的过程中，通过不同的方法获得dom集合有时候是HTMLcollection,有时候是nodeList,当时没有太过于在意，由于都是伪数组，无法使用数组的方法，我就转成数组之后就没管了，但是后面无意间看到一篇文章让我想重新认识一下这两位兄弟。

2、这两种伪元素分别怎么得到

<div>
    <span name="span" class="item">1</span>
    <span name="span" class="item">2</span>
    <span name="span" class="item">3</span>
    <span name="span" class="item">4</span>
    <span name="span" class="item">5</span>
    <span name="span" class="item">6</span>
    <span name="span" class="item">7</span>
</div>

2.1、得到HTMLcollection

const getDomByClassName = document.getElementsByClassName("item")
const getDomByTagName = document.getElementsByTagName("span")

2.2、得到nodeList

const getDomByName = document.getElementsByName("span")
const getDomBySelector = document.querySelectorAll('.item')

2.3、结果

console.log("通过getElementsByClassName获取",getDomByClassName);
console.log("通过getElementsByTagName获取",getDomByTagName);
console.log("通过getElementsByName获取",getDomByName);
console.log("通过querySelectorAll获取",getDomBySelector);

3、这两种元素的区别

那么这两种集合有区别呢？HTMLcollection是动态的，nodeList是静态的。那这个动态和静态有什么作用呢？动态的意思是:当页面中的元素发生改变的时候，已经获取到的元素也会跟随发生改变，例如页面中删除了一个dom元素，那么集合中也会少一个对应的元素。而静态的nodeList就不会受到这个影响。

3.1、对于日常开发的影响

当我们操作的是HTMLcollection这种动态元素的时候，我们很难去排查出现问题，难以定位到问题出现的位置。而nodeList就不会出现这种问题。所以我推荐大家在获取dom的时候，最好采用

domcument.querySelector('选择器')
domcument.querySelectorAll('选择器')

简述HTMLcollection和nodeList的区别