JavaScript：节点列表转换为阵列

我想将节点列表转换为阵列。我想打印的清单（caption 1,...caption 5），但它打印：JavaScript：节点列表转换为阵列

[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement]

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Caption</title> 
<style> 
    .captn { 
    position: absolute; 
    padding: 10px; 
    margin: 200px auto; 
    text-align: center; 
    font-family:serif, fantasy; 
    font-size:36px; 
    color: #009933; 
    text-decoration: none; 
    text-transform: uppercase; 
    list-style-type: none; 
} 
</style> 

</head> 

<body> 


<div> 
    <ul id = "caption" class="captn"><li id = "caption0">caption 0</li><li id = "caption1">caption 1</li><li id = "caption2">caption 2</li><li id = "caption3">caption 3</li><li id = "caption4">caption 4</li><li id = "caption5">caption 5</li></ul> 
</div> 

<script> 

    var msg; 
    var cap = []; 
    var capList; 

    var f = document.getElementsByClassName("captn"); 
    msg = f.item(0).childNodes; 
    b = f.item(0).childNodes.length; 
    var classAr = Array.prototype.slice.call(msg); 

    document.write(classAr); 


</script>  

</body> 
</html>

来源

2016-07-27 user6642297

欢迎来到堆栈溢出。 [阅读此处]（http://stackoverflow.com/help/mcve）以获取有关如何创建最小，完整和可验证问题的更多信息。 – Toby

您可以使用Array.from()。

Array.from(nodeList)

来源

2016-07-27 01:50:44 jonS90

使用querySelectorAll并选择与id与caption开始下captn类的所有元素，则该节点列表转换为使用Array.from并且最后map通过阵列阵列，返回仅含有textContent

一个新的数组

var captions = Array.from(
 
    document.querySelectorAll('.captn [id^="caption"]') 
 
); 
 

 
var captionsText = captions.map(function(caption) { 
 
    return caption.textContent; 
 
}); 
 

 

 
document.write(captionsText);

<div> 
 
    <ul id="caption" class="captn"> 
 
    <li id="caption0">caption 0</li> 
 
    <li id="caption1">caption 1</li> 
 
    <li id="caption2">caption 2</li> 
 
    <li id="caption3">caption 3</li> 
 
    <li id="caption4">caption 4</li> 
 
    <li id="caption5">caption 5</li> 
 
    </ul> 
 
</div>

来源

2016-07-27 01:59:12

谢谢。我是Java Script中的新成员。在JavaScript中，Bitwise XOR运算符的含义如下：'.captn [id^=“caption”]' – user6642297

在这种情况下，帽符号“^”并不意味着按位异或。 'document.querySelectorAll'是一个接受_selector_ https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll的函数。 '.captn'是一个类选择器，'[id^=“caption”]'是一个属性选择器。 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors。 '^ ='表示以“caption”开始，所以'[id^=“caption”]表示选择所有以“caption”开头的id。请考虑用绿色对号标记我的答案，帮助你！ –

再次感谢。这个答案是我对JavaScript理解的一个转折点。我在回答中标记了顶部的箭头，但我看不到绿色的选中标记。 – user6642297

首先，我要感谢@Red Mercury，他的回答大大提高了我在JavaScript中的知识。我是Stack Overflow的新手，不知道如何标记他的答案为绿色，如果有金标记，我会为他做。谢谢红水星。

我想要做的是将字幕列表作为滑动字幕。在Javascript中使用数组很容易，但是我无法将节点列表转换为数组，因为nodelist在使用innerHtml的循环中不起作用。所以这里是解决方案：

<html> 
<head> 
    <title>Slide 3</title> 
    <style> 
     .captn { 
    padding-top: 550px; 
    text-align:center; 
    font-family:serif, fantasy; 
    font-size:36px; 
    color: #009933; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
    </style> 
</head> 

<body> 


<div> 
    <ul id = "caption" class="captn"> 
     <li id = "caption0">caption 0</li> 
     <li id = "caption1">caption 1</li> 
     <li id = "caption2">caption 2</li> 
     <li id = "caption3">caption 3</li> 
     <li id = "caption4">caption 4</li> 
     <li id = "caption5">caption 5</li> 
     <li id = "atim">item</li> 
     <li id = "caption6">caption 6</li> 
    </ul> 
</div> 

<script> 
    var i = 0; 
    var j = 0; 
    var intv = 1000; 
    var msg = ""; 
    var cap = []; 
    var capList = ""; 


    var captions = Array.from(
      document.querySelectorAll('.captn [id ^= "caption"]') 
     ); 

    var captionsText = captions.map(function(caption) { 
      return caption.textContent; 
     }) 


    for (i = 0; i < captions.length; i++) { 
     cap[i] = captionsText[i] + "<br>"; 
     msg = cap[i]; 
     capList += msg.replace(/\,/g, ""); 
    } 
    b = captions.length; 

    function swapImage() { 
     var elm = document.getElementById("caption"); 
     elm.innerHTML = cap[j]; 

     if(j < b - 1) { 
      j++; 
     } 
     else { 
      j = 0; 
     } 
     setTimeout("swapImage()", intv); 
    } 

    window.onload=swapImage; 
    </script> 




</body> 
</html>

来源

2016-07-29 23:57:38 user6642297

JavaScript：节点列表转换为阵列

回答

相关问题