一、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. centos部署jenkins

    1. 实验环境:   操作系统: CentOS Linux release 7.2.1511 (Core) 软件版本: jdk-8u60-linux-x64    apache-tomcat-9.0. ...

  2. FunctionGraph无缝集成Express应用

    Express APP 作为一个Node.js开发者,相信大家都可能会使用Express框架,无论是构建后端服务,或是搭建一个前端的开发态服务器,Express都是一个很流行的选择.构建Express ...

  3. Apache2.2安装

    貌似Apache官网从2.2.X之后不再发布Windows安装版本,需要的话得自己编译 从官网下载2.2.25(我下了一个no-ssl的),安装提示 因为本机已经安装IIS,占用80端口,修改Apac ...

  4. Robot Framework 初学者上手资料

    首先要声明一下这是从http://www.cnblogs.com/yufeihlf/p/5949984.html拷贝的. 在这里只是自己的一个笔记,方便日后添加.修改内容. 总结下Robot Fram ...

  5. 美国诚实签经验——我们准备了XX万的存款，这足以应付我预算表中涉及的所有开支，如果有意外情况我们的资金不足以应付，我们双方的父母也会支援我们，绝对不会占用美国的任何福利

    闲话少絮,直接分享本人诚实签的经验,希望对有此打算的朋友有帮助! 个人经验有限,经历仅供参考~~ 第一步:决定赴美生子. 第二步:选择诚实签. 第三步:填写DS160表格(网址https://ceac ...

  6. Java 技术体系（JDK 与 JRE 的关系）、POJO 与 JavaBeans

    Java 技术体系的分层结构(不同的颜色表示不同的层次),尤其注意 JDK 与 JRE 之间的包含关系: 图见 Java Platform Standard Edition 7 Documentati ...

  7. 【HDU 3652】 B-numbers

    [题目链接] 点击打开链接 [算法] 数位DP f[i][j][k][l]表示i位数,第一位为j,除以13的余数为k,是/否包括子串“13”的方案数 当然,我们也可以先打表,然后,对于每次询问,二分即 ...

  8. Navicat for MySQL 激活方法

    Navicat for MySQL 激活方法: 首先下载 PatchNavicat.exe ,不知道在哪儿下的可以直接拿走: 链接:https://pan.baidu.com/s/1yy4M8IDx8 ...

  9. STM32: TIMER门控模式控制PWM输出长度

    搞了两天单脉冲没搞定,无意中发现,这个利用主从模式的门控方式来控制一路PWM的输出长度很有效. //TIM2 PWM输出,由TIM4来控制其输出与停止 //frequency_tim2:TIM2 PW ...

  10. fck 属性配置大全

    优化FCKeditor文件夹和文件: 下载FCKeditor并解压之后,会产生_samples和 editor两个文件夹和几个文件,全部删除以_开头的文件夹和文件,因为这些都是FCKeditor的一些 ...