摘要：原文发布在我的独立博客上从选择器的返回值说起抛开大大解放生产力的，使用获取元素要使用方法，或类似的，第一种情况下，根据获取时，返回值是唯一的元素而根据等获取时候，返回值是包含所有符合条件的多个元素的列表。
原文发布在我的独立博客上 ~： 从DOM选择器的返回值说起
抛开大大解放生产力的jQuery，使用JS获取元素要使用getElementById方法，或类似的getElementsByTagName, getElementsByClassName，getElementsByName. 第一种情况下，根据ID获取时，返回值是唯一的元素；而根据TagName, ClassName 等获取时候，返回值是包含所有符合条件的多个元素的“列表”。此处“列表”要加双引号，是因为严格来说，JavaScript乃至DOM元素中并没有所谓“列表”或List的数据类型／对象，既然不能称为列表，那么它们到底是啥？
这篇blog就试图从getElement(s)的返回值说起，往上扯一些早就该了解，但总是似懂非懂的简单的DOM基础知识。
getElements方法的返回值getElementsByClassName("myClass")获取指定类名为myClass的元素，getElementsByTagName("some-tag")获取标签为"some-tag"的元素，它们的返回值都是 HTMLCollection 对象
getElementsByName("myName")获取标记了name属性为myName的元素，它的返回值是NodeList对象
getElementById("myId")获取唯一id属性为myId的元素。有趣的是，当访问该元素的constructor.name属性时，可以得到不同的值。form元素对应HTMLFormElement对象, main标签则对应HTMLElement对象，这应该是从面向对象的角度看，不同类型的元素属于不同的对象实例。
querySelector和querySelectorAll方法是HTML5新增的Web API，它们接受selector参数，selector正是我们常用的CSS选择器。不同之处在于，querySelector("form")返回的是页面中的第一个"form"元素，而querySelectorAll("form")返回NodeList类型，它们是所有form的列表。
接着来看这两个对象，它们都由多个元素组成一个“列表”，或者说“数组”，我们也可以像使用数组一样方便地用下标访问单个元素。但是它们仅仅是Array-like，并没有Array对象的其他常用方法，比如forEach.
javascriptvar buttons = document.getElementsByTagName("button");
console.log(buttons[1]); // 输出第2个button元素
console.log(buttons.forEach); // undefied
console.log(buttons.filter); //undefied
var next_nodes = document.getElementsByName("next");
console.log(next_nodes[0]); //输出列表中第1个元素
console.log(next_nodes.forEach); //undefied
除了以上提到的getElements方法之外
NodeList也是Node.childNodes, document.querySelector的返回值类型
HTMLCollection也是Node.children, document.forms等的对象类型
在使用getElements方法时，NodeList和HTMLCollection好像并没什么不一一样的，但是从字面上讲，一个是节点列表，一个是HTML（元素）集合，并不是一回事。他们的不同可以从另外两个方法看出，它们是childNodes和children，下面是一个合适的例子。
Node.childNodes与Node.children的区别htmltext in div Link Strong Text Strong Link
javascriptmydiv = document.querySelector("div");
console.log(mydiv.children); // 不含#text "text in div"和注释
console.log(mydiv.childNodes); // 含文字"text in div"和注释
mydiv.children获得的，是 mydiv.childNodes获得的，是包含文本内容在内的所有子节点。所谓节点，正是浏览器在构造DOM树的每一个不可或缺的元素，当然少不了必须的文本节点。 所以它们不同就在于一个获取的是元素，一个获取所有节点。 到底元素和节点有什么不同，看原型链。 以元素为例，调用mydiv.children[0].constructor.name，可知Link元素的类型HTMLAnchorElement; HTMLAnchorElement的原型链为： HTMLAnchorElement --> HTMLElement --> Element --> Node --> EventTarget --> Object 调用mydiv.childNodes[0].constructor.name，可知节点的对象类型Comment，类似也可以得到文本节点的类型Text，它们的原型链为： Comment --> CharacterData --> Node --> EventTarget --> Object 看到原型链就可以豁然开朗了，Node是包含Element和Text, Comment在内的概念，而HTMLElement只是Node的一个子集。 除了上面示例的几个节点类型，Node包含的类型如下；对任意一个节点myNode，myNode.nodeType属性就是它的类型。 图片截自 MDN, thumb down图标代表废弃API，是不推荐使用的类型 终于扯到最基本的DOM概念了，DOM事关重大，然而原理其实也就是两句话的事儿。 DOM == Document Object Modle（文档结构模型），浏览器收到一个HTML页面后，根据页面结构构建一个DOM树，DOM树就是由不同类型的节点（Node）所组成的。在HTML文档中，一条注释语句是一个Node，一个HTML元素也是Node，甚至也是一个Node。有了Node对象，一生二，二生三，三生万物；除了事件和ajax请求，前端编程说白了就剩下来使用浏览器提供的DOM API来对Node进行各种操作。 当然，观察Node的原型链，可以看到处于它上一层的是 EventTarget对象，这意味着Node都继承了EventTarget的属性和方法，最常见的当然是.addEventListener。这正是javascript在前端能够实现各种可能性的原因，一切节点都可以绑定事件。 参考： 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/85686.html的子标签代表的元素，所以示例中的text in span并不属于span.children
Text --> CharacterData -- Node -- EventTarget --> Object
1. DOM概述 | MDN
2. Node - Web API Interfaces | MDN
3. NodeList - Web API Interfaces | MDN
4. HTML5中类jQuery选择器querySelector的使用 - SegmentFault
摘要：放在中减少引起和接下来我们再来讨论一下图片与雪碧图或精灵，在网页中我们会用到很多图标，如果每一个图标是单独的一张图片，那网页加载的时候，就会有多个请求去请求图片，显而易见会影响网页性能，所以要采取方法对网页中图标使用进行优化处理。 我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单...
摘要：放在中减少引起和接下来我们再来讨论一下图片与雪碧图或精灵，在网页中我们会用到很多图标，如果每一个图标是单独的一张图片，那网页加载的时候，就会有多个请求去请求图片，显而易见会影响网页性能，所以要采取方法对网页中图标使用进行优化处理。 我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单...
摘要：它最主要的目的是为了在或文档节点树中定位节点所设计。选取所有拥有名为的属性的元素。选取元素的所有元素，且其中的元素的值须大于。实例路径表达式结果选取元素的所有子元素。如在加载文件的时候发生错误，将抛出，应作适当处理。 从Xpath说起 什么是Xpath XPath是W3C的一个标准。它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计。XPath是一种表达式语言，...
摘要：当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景定义和用法方法获得匹配选择器的第一个祖先元素，从当前元素开始沿树向上。详细说明如果给定表示元素集合的对象，方法允许我们检索树中的这些元素以及它们的祖先元素，并用匹配元素构造新的对象。 w3c: http://www.w3school.com.cn/jquery/traversing_closest.asp 本例演示如何通过 c...
阅读 1330·2021-11-19 09:55
阅读 2590·2021-09-06 15:02
阅读 3270·2019-08-30 15:53
阅读 811·2019-08-29 16:36
阅读 1095·2019-08-29 16:29
阅读 2130·2019-08-29 15:21
阅读 504·2019-08-29 13:45
阅读 2575·2019-08-26 17:15
