Question

一组“dl”列表：

<div class = "container">
   <dl class = "list">
       <dt class = "title">title 1-1</dt>
       <dd class = "detail">detail 1-1</dd>

       <dt class = "title">title 1-2</dt>
       <dd class = "detail">detail 1-2</dd>
   </dl>
</div>

<div class = "container">
   <dl class = "list">
       <dt class = "title">title 2-1</dt>
       <dd class = "detail">detail 2-1</dd>

       <dt class = "title">title 2-2</dt>
       <dd class = "detail">detail 2-2</dd>
   </dl>
</div>

我需要访问'dt'标签中的所有标题。 nodelist返回了两个节点，但是一旦我将它转换为数组，它就不会在console.log中显示任何内容。

var myContainer = document.getElementsByClassName('container');

for(var i=0; i<myContainer.length; i++) {
    var nodelist = myContainer[i].getElementsByTagName('dt');

    console.log(nodelist);   //returns HTMLcollection []
                             // 0 - dt.title
                             // 1 - dt.title

    var arr = Array.prototype.slice.call(nodelist, 0);

    console.log(arr);        //returns []
                             //there are no child objects.
}

为什么？

Answer 1

nodelist (HTMLCollection)不是数组。另请参阅Why can't I use forEach or map on a NodeList?

NodeList与数组非常相似，并且很容易在它们上使用Array.prototype方法。但是，这是不可能的。

使用

访问它

for (var j = 0; j < nodelist.length; j++)
    console.log(nodelist[j].innerHTML);

JSFiddle

由于此标记为jquery

$('.container .title').each(function(index, title) {
    console.log($(title).text());
});

JSFiddle

更新：

我终于找到了罪魁祸首

在for循环结束时添加

var titles = arr.map(function(dt) { return dt.innerHTML; });
console.log(titles);

这会显示dt.title的文字

["title 1-1", "title 1-2"]
["title 2-1", "title 2-2"]

JSFiddle

将HTML DOM Collection转换为数组

1 个答案: