javascript中的NodeList对象

Question

任何人都可以告诉我NodeList是什么类型的对象.我读到它是一个类似于数组的对象,例如,它可以通过括号表示法访问var a = someNode.childNode[0];.这怎么可能,因为通过括号表示我们只能访问对象的属性,而且我知道我们不能拥有

Answer 1

A NodeList是的集合DOM elements.它就像一个数组(但它不是).要使用它,您必须将其转换为常规JavaScript数组.以下代码段可以为您完成工作.

const nodeList = document.getElementsByClassName('.yourClass'),
      nodeArray = [].slice.call(nodeList);

更新:

// newer syntax
const nodeList = Array.from(document.querySelectorAll('[selector]'))

// or
const nodeList = [...document.querySelectorAll('[selector]')]

Answer 2

NodeList是一个宿主对象,不受适用于本机JavaScript对象的常规规则的约束.因此,您应该坚持使用文档化的API,它包含一个length属性,并通过方括号属性访问语法访问其成员.您可以使用此API创建Array包含NodeList成员的快照:

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}

Answer 3

NodeList不是核心Javascript对象,它由浏览器提供DOM.想象一个函数将一个接口返回到一个动态或活动对象,所以forEach()不可用,但你可以把它转换成一个真正的数组,以获得一个快照,例如

// turns nodelist into an array to enable forEach
function toArray(list) {
  var i, array = [];
  for  (i=0; i<list.length;i++) {array[i] = list[i];}
  return array;
}

详情:http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

Answer 4

NodeLists"实时",也就是说,当文档结构发生变化时,它们会更新,以便它们始终具有最准确的信息.实际上,所有NodeList对象都是在访问DOM时针对DOM运行的查询.

每当你想迭代NodeList时,最好用长度初始化第二个变量,然后将迭代器与该变量进行比较:

var divs = document.getElementsByTagName("div");

for (var i=0, lens=divs.length; i  <  len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
} 

NodeList是一个类似于结构的数组,但它实际上并不是一个数组.您可以通过括号表示法访问数组值.

Answer 5

JavaScript就像酒精,它可以强制:

var links = document.getElementsByTagName('a');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener('click', onClickFN, false);
});

Answer 6

节点列表通常实现为带有过滤器的节点迭代器.这意味着获取像length这样的属性是O(n),并通过重新检查长度迭代列表将是O(n ^ 2).

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

最好这样做:

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
   doSomething(paragraph);
} 

只要数组不包含被视为boolean false的内容,这适用于所有集合和数组.

在迭代childNodes的情况下,您还可以使用firstChild和nextSibling属性.

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}

Answer 7

现在在ES2015中,您可以使用Array.from从任何类似数组的对象创建Array实例的方法,所以这应该工作:

const divList = Array.from( document.getElementsByTagName("div") );

有关更多信息,请访问:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from