一、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方法说起的更多相关文章

  1. getElementsByTagName() 方法

    HTML DOM Document 对象 定义和用法 getElementsByTagName() 方法可返回带有指定标签名的对象的集合. 语法 document.getElementsByTagNa ...

  2. (三)学习JavaScript之getElementsByTagName方法

    参考:http://www.w3school.com.cn/jsref/met_doc_getelementsbytagname.asp HTML DOM Document 对象 定义和用法 getE ...

  3. IE浏览器getElementsByTagName方法的兼容问题

    今天发现了一个非常可笑的IE兼容问题,环境是IE8,调用getElementsByTagName方法搜索元素,结果集居然自动识别元素的id作为键名,去掉元素定义id才能按正常的数字索引返回. 因为网页 ...

  4. document.getElementsByTagName()方法的返回值

    在阅读<JS DOM 编程一书>一书时,看到getElementByTagName函数返回值为数组,然后自己验证了下,发现不是数组,而是一个可遍历的HTMLCollection对象 HTM ...

  5. javascript 原生得到document.Element的方法

    今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...

  6. document,element,node方法

    document方法: getElementById(id)                             返回指定结点的引用 getElementsByTagName_r(name)    ...

  7. LeetCode 169. Majority Element解题方法

    题目: Given an array of size n, find the majority element. The majority element is the element that ap ...

  8. 玩转DOM遍历——用NodeIterator实现getElementById，getElementsByTagName方法

    先声明一下DOM2中NodeIterator和TreeWalker这两类型真的只是用来玩玩的,因为性能不行遍历起来超级慢,在JS中基本用不到它们,除了<高程>上有两三页对它的讲解外,谷歌的 ...

  9. Python+Selenium之cannot focus element 解决方法

    有时候刚进入页面输入第一个值时脚本会报错:cannot focus element 贴下我的脚本和解决办法供大家参考 我原本的脚本是: WebDriverWait(driver,15,0.5).unt ...

随机推荐

  1. linux下配置LAMP开发环境，以及经常使用小细节

    本来安装没什么可说到.可是在linux其中easy会出现各种各样到问题. 我安装以后导致各种问题 比方php无法正常解析,数据库无法关闭,Apache无法开启等等........ 所以搞得我比較郁闷, ...

  2. HDU 5324 Boring Class【cdq分治】

    这就是一个三维排序的问题,一维递减,两维递增,这样的问题用裸的CDQ分治恰好能够解决. 如同HDU 4742(三维排序,一个三维都是递增的) 由于最小字典序比較麻烦,所以要从后面往前面做分治.每一个点 ...

  3. SSL和SSH的差别

    有人说,SSH通常是用来提供安全的登录用的.SSL仅仅是一个在协议层中增加的一层用来提供安全.    SSH工作在TCP之上,能够在启动一个SSH应用后.在其通道里执行其他协议的应用.如邮件.    ...

  4. java7新特性之Diamond syntax

    java7新特性之Diamond syntax Java 7 also introduces a change that means less typing for you when dealing ...

  5. 公钥加密，摘要算法MD5，SSH相关概念

    1.公钥加密,又叫非对称加密,一般指的是用一组密钥来保证通信的安全.(公钥,私钥)成对存在且惟一,典型的公钥算法有 RSA(计算出的是1024位,128字节),顺便提一下与公钥加密算法相对应的就是传统 ...

  6. office文档、图片、音/视频格式转换工具

    1.音频/视屏转换工具VLC https://wiki.videolan.org/Mp3/#Container_formats  http://wenku.baidu.com/view/ba73ac5 ...

  7. hdu - 5023 - A Corrupt Mayor's Performance Art（线段树）

    题目原文废话太多太多太多,我就不copyandpaste到这里啦..发个链接吧题目 题目意思就是:P  l  r  c  将区间 [l ,r]上的颜色变成c    Q  l r 就是打印出区间[l,r ...

  8. continue 的理解

    continue 一般出现循环体的开始部分,或中间部分,而不可能是结尾(没有必要,正常执行也会退出本次循环): 1. continue 的替代方案 while (true){ if (A || B){ ...

  9. JeePlus：项目部署

    ylbtech-JeePlus:项目部署 1.返回顶部 1. 项目部署 1 开发工具:idea/eclipse/myeclipse+ mysql/oracle+tomcat6/7/8. 下面以ecli ...

  10. 运行Tomcat 遇到的问题以及解决总结

    本文持续更新…… 情况一:在eclipse中启动tomcat提示 1. Server Tomcat v8.5 Server at localhost failed to start . 解决方案 方法 ...