如何在 JavaScript 中检测 HTMLCollection/NodeList？

How to detect HTMLCollection/NodeList in JavaScript?

提问by simon xu

I'm not sure my current implementation is available all the time:

我不确定我当前的实现是否一直可用：

function isNodeList(nodes) {
    var result = Object.prototype.toString.call(nodes);
    // modern browser such as IE9 / firefox / chrome etc.
    if (result === '[object HTMLCollection]' || result === '[object NodeList]') {
        return true;
    }
    //ie 6/7/8
    if (typeof(nodes) != 'object') {
        return false;
    }
    // detect length and item 
    if (!('length' in nodes) || !('item' in nodes)) {
        return false;
    }
    // use the trick NodeList(index),all browsers support
    try {
        if (nodes(0) === null || (nodes(0) && nodes(0).tagName)) return true;
    }
    catch (e) {
        return false;
    }
    return false;
}

A common situation is {length:1,item:function(){return [];}}
The value of result in chrome / safari / opera is '[object NodeList]'.
In firefox and IE 9 , it is '[object HTMLCollection]'.

一个常见的情况是 {length:1,item:function(){return [];}}
chrome/safari/opera 中 result 的值为 '[object NodeList]'。
在 firefox 和 IE 9 中，它是“[object HTMLCollection]”。

Which is the standard value?

哪个是标准值？

回答by vineethbc

The following should return true, if nodes is of type NodeList

如果节点是NodeList类型，则以下应返回true

NodeList.prototype.isPrototypeOf(nodes)

@DavidSpector, for HTMLCollectionyou can similarly use :

@DavidSpector，对于HTMLCollection，您可以类似地使用：

HTMLCollection.prototype.isPrototypeOf(collection)

回答by Tomalak

I would structure the code differently:

我会以不同的方式构建代码：

function isNodeList(nodes) {
    var stringRepr = Object.prototype.toString.call(nodes);

    return typeof nodes === 'object' &&
        /^\[object (HTMLCollection|NodeList|Object)\]$/.test(stringRepr) &&
        (typeof nodes.length === 'number') &&
        (nodes.length === 0 || (typeof nodes[0] === "object" && nodes[0].nodeType > 0));
}

Notes:

笔记：

• less return paths make easier-to-read code
• stick with one type of logic, if possible (i.e. use less negated checks)
• "item"is not mandatorily in a nodeList
• use hasOwnProperty()instead of in
• use square brackets to index into the list
• I don't think a try/catch is really necessary, but that might be wrong - you decide
• check for nodeTypeinstead of tagName, as text nodes or comments do not have a name
• add more checks to the &&chain if you see fit

• 更少的返回路径使代码更易于阅读
• 如果可能，坚持使用一种逻辑（即使用较少的否定检查）
• "item"不是强制在 nodeList 中
• 使用hasOwnProperty()代替in
• 使用方括号索引到列表中
• 我不认为 try/catch 真的有必要，但这可能是错误的 - 你决定
• 检查 fornodeType而不是tagName，因为文本节点或注释没有名称
• &&如果您认为合适，则向链条添加更多检查

回答by Guja1501

script:

脚本：

Element.prototype.isNodeList = function() {return false;}
NodeList.prototype.isNodeList = HTMLCollection.prototype.isNodeList = function(){return true;}

use like this:

像这样使用：

var d; // HTMLCollection|NodeList|Element
if(d.isNodeList()){
  /*
    it is HTMLCollection or NodeList
    write your code here
  */
}else{
  /*
    it is not HTMLCollection and NodeList
    write your code here
  */
}

回答by rosell.dk

Here is how to test if an object is a NodeList in modern browsers:

以下是在现代浏览器中测试对象是否为 NodeList 的方法：

if (nodes instanceof NodeList) {
  // It's a NodeList object
}

回答by koech

Check if variable is an HTMLcollection or a dom element

检查变量是 HTMLcollection 还是 dom 元素

  var foo = document.getElementById('mydiv');
  var foo2 = document.getElementsByClassName('divCollection');
  console.log(foo instanceof HTMLElement);
  console.log(foo instanceof HTMLCollection);

回答by Mohamed Moustafa

This answer is probably really really late, but....

这个答案可能真的很晚了，但是......

if (nodes == '[object NodeList]') {
  // It's a nodeList
}

回答by eisbehr

I created a benchmark of all answers here to see, what is the best approve in speed. Turns out NodeList.prototype.isPrototypeOf(nodes)is by far the fastest. But in a normal use-case nodes instanceof NodeListwould be fine too.

我在这里创建了所有答案的基准，看看什么是最好的速度批准。事实证明NodeList.prototype.isPrototypeOf(nodes)是迄今为止最快的。但在正常用例中nodes instanceof NodeList也可以。

I personally would just not pick the isNodeListfunction, because its slow, custom and too much overhead.

我个人不会选择该isNodeList功能，因为它速度慢、自定义且开销太大。