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：節點列表轉換爲陣列

回答

相關問題