从Element.getElementsByTagName方法说起

一、getElementsByTagName方法：

我们先看几个解释：
1）W3C:
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。没有说明返回值的具体类型。
2）菜鸟教程：
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。明确指出返回值的是一个NodeList 对象

3）MDN:
getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的HTML集合 HTMLCollection

这里有个问题了，NodeList与HTMLCollection有什么区别，getElementsByTagName（）方法返回的到底是什么？菜鸟教程和MDN的说法哪个准确（笑）

二、NodeList VS HTMLCollection

相同点：
1）它们都有length属性
2）都有元素的getter，叫做item，可以传入索引值取得元素。
3）都是类数组
不同点：
(1)NodeList
一个节点的集合，既可以包含元素和其他节点(注释节点、文本节点等)。
(2)HTMLCollection
元素集合, 只有Element

除此之外，HTMLCollection还有一个nameItem()方法，可以返回集合中name属性和id属性值的元素。（部分浏览器也支持NodeList的nameItem()方法）
什么DOM方法返回NodeList，什么方法返回HTMLCollection？

三、2种方法由什么方法产生？
NodeList对象是由childNodes属性，querySelectorAll方法返回的一组节点的集合。由childNodes属性返回的NodeList对象是一个动态的集合（live collection），而由querySelectorAll方法返回的则是一个静态的集合（static collection）。
HTMLCollection由getElementsByTagName等方法产生。HTMLCollection一组有序（in document order基于文档结构顺序）的动态集合。会随着DOM树的变化自动更新自身。

四、一道面试题：
MDN解释：
getElementsByTagName：指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用Element.getElementsByTagName() .
看一道面试题：

document.getElementsByTagName("td") 与 $("td")的共同点和区别？
1.他们返回的都是类数组对象，都可以通过for循环遍历。具体地说，前者返回一个HTMLCollection，后者$("td")是一个Jquery对象。
2.document.getElementsByTagName("td") 返回的是动态的DOM结构，DOM发生变化，结果也会变化；$("td")返回的是静态的，是jquery选择器方法执行时的结果。
关于第二点，可以写个例子：

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script

  src="https://code.jquery.com/jquery-2.2.4.js"

  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="

  crossorigin="anonymous"></script>

    <script type="text/javascript">

        var liHTMLCollection = document.getElementsByTagName('li');

        var liJqueryObject = $('li');

        console.log(liHTMLCollection);

        console.log(liJqueryObject);

        window.setTimeout(()=>{

            //移除第一个li

            liJqueryObject[0].remove();

            //再次打印

            console.log(liHTMLCollection);//变成2个

            console.log(liJqueryObject);//还是3个

        },1000)

    </script>

</body>

参考资料：

1.HTMLCollection与NodeList

2.MDN

3.Difference between HTMLCollection, NodeLists, and arrays of objects

巴特西

从Element.getElementsByTagName方法说起

最新文章

热门文章