区别htmlcollection,nodelists,和对象数组

user1032531提出了一个问题:Difference between HTMLCollection, NodeLists, and arrays of objects,或许与您遇到的问题类似。

回答者kinishinaiFelix Kling给出了该问题的处理方式:

First I will explain the difference between NodeListand HTMLCollection.

Both interfaces are collectionsof DOM nodes. They differ in the methods they provide and in the type of nodes they can contain. While a NodeListcan contain any node type, an HTMLCollectionis supposed to only contain Element nodes. An HTMLCollectionprovides the same methods as a NodeListand additionally a method called namedItem.

Collections are always used when access has to be provided to multiple nodes, e.g. most selector methods (such as getElementsByTagName) return multiple nodes or getting a reference to all children (element.childNodes).

For more information, have a look at DOM4 specification - Collections.

What is the difference between document.getElementsByTagName("td")and $("td")?

getElementsByTagNameis method of the DOM interface. It accepts a tag name as input and returns a HTMLCollection(see DOM4 specification).

$("td")is presumably jQuery. It accepts any valid CSS/jQuery selector and returns a jQuery object.

The biggest differences between standard DOM collections and jQuery selections is that DOM collections are typicallylive (not all methods return a live collection though), i.e. any changes to the DOM are reflected in the collections if they are affected. They are like a viewon the DOM tree, whereas jQuery selections are snapshots of the DOM tree in the moment the function was called.

Why is console.log also showing the array of DOM elements beside them, and are they not objects and not an array?

jQuery objects are array-likeobjects, i.e. they have numeric properties and a lengthproperty (keep in mind that arrays are just objects themselves). Browsers tend to display arrays and array-like objects in a special way, like [ ... , ... , ... ].

What is the elusive "NodeLists" all about, and how do I select one?

See the first part of my answer. You cannot selectNodeLists, they are the resultof a selection.

As far as I know there is not even a way to create NodeLists programatically (i.e. creating an empty one and adding nodes later on), they are only returned by some DOM methods/properties.

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:如何在JavaScript中编写扩展方法?
下一篇:在谷歌图表API中设置硬的最小轴值

相关推荐

  • (深入)使用jQuery复制数组(复制)

    Communitymorgancodes(https://stackoverflow.com/users/1/community)提出了一个问题:(Deep) copying an array usi...

    2 年前
  • 顺时针螺旋输出二维数组

    给定一个数组,将该数组从第一个元素开始顺时针打印出来。 思路: 先考虑打印周围一圈的问题,然后可以使用递归求解,直到最后全都打印完为止。也就是先打印最外围的数,然后对于元二维数组中间的数组作为一个新的...

    2 年前
  • 项目中数组循环的一个优化案例

    最近在项目中遇到一个性能问题,根据一些select选择框和一些单选按钮的值综合起来对一个数组进行遍历筛选,并获取最终符合条件的数据,但由于这个数组的长度过长,达到6000,甚至更长,所以导致筛选之后的...

    3 个月前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... ...

    4 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    19 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    20 天前
  • 随着Nodejs JSON对象响应(转换对象数组JSON字符串)

    Rudolf Olahclimboid(https://stackoverflow.com/users/9903/rudolfolah)提出了一个问题:Responding with a JSON o...

    2 年前
  • 重新排序的数组

    重新排序的数组...

    2 年前
  • 重学JS:数组

    除了Object类型之外,Array类型恐怕是js中最常用的类型了,并且随着js的发展进步,数组中提供的方法也越来越来,对数组的处理也出现了各种骚操作,此篇文章将会带你重新学习数组中的实例方法 数...

    10 个月前
  • 遍历数组的n种方法

    var arr = 1,2,3,4,5 // arr.forEach(function(item){ // // 当 item =2 的时候 打印123 同时让 循环终止 // // forEac...

    1 年前

官方社区

扫码加入 JavaScript 社区