javascript中的NodeList对象

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

已邀请:

8 个回复

肉脓措伪

ANodeList是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]')]

陈獭

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

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

臀博

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

艾食魄轻县

JavaScript就像酒精，它可以强制：

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

呈辖玫割善

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是一个类似于结构的数组，但它实际上并不是一个数组。您可以通过括号表示法访问数组值。

摊揉售

节点列表通常实现为带有过滤器的节点迭代器。这意味着获取像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);
}

稳赣苍卯改

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

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

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

傻零凰死授

摘要： NodeList对象是表示节点集合的数据结构。 DOM上下文中的节点可以是以下内容：文件本身 DOM元素（即HTML / SVG元素）文本评论 ANodeList不是一个数组，但是NodeList是一个可迭代的数据结构，这意味着我们可以使用一个for..of循环遍历这些值（即节点项）。还有它们在NodeList原型上的一些很好的实用功能，这使得使用它们更方便。例：

const parent = document.querySelector('.parent');
const myNodeList1 = parent.childNodes; // this property is a Nodelist
console.log(myNodeList1 instanceof NodeList);

const myNodeList2 = document.querySelectorAll('.foo'); // this method returns a Nodelist
console.log(myNodeList2 instanceof NodeList);

// looping over the items of a nodelist
for (let el of myNodeList2) {
  el.innerHTML = 'hi';
}

// getting the length of a nodeList 
console.log(myNodeList2.length);

<div class="parent">
  <div class="foo"></div>
  <div class="foo"></div>
</div>

要回复问题请先登录或注册

javascript中的NodeList对象

8 个回复

发起人

nodelist

问题状态

javascript中的NodeList对象

与内容相关的链接

8 个回复

发起人

nodelist

问题状态