JavaScript：ノードリストから配列への変換

ノードリストを配列に変換しようとしています。私は、リスト（caption 1,...caption 5）を印刷したいのですが、それが印刷されます。あなたがArray.from()を使用することができます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

ようこそスタックオーバーフロー。 Minimal、Complete、Verifiableの質問の作成方法の詳細については、[こちらを読む]（http://stackoverflow.com/help/mcve）を参照してください。 – Toby

。その後、

Array.from(nodeList)

出典

2016-07-27 01:50:44 jonS90

使用querySelectorAllとcaptionで始まるidでクラスcaptnの下にあるすべての要素を選択し、唯一textContent

を含む新しい配列を返す、アレイを介し Array.from、最後 mapを使用してアレイにノードリストを変換します

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

このコンテキストでハット記号 '^'はビット単位のXORを意味するものではありません。 '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 '^ ='は〜で始まることを意味します。だから '[id^=" caption "]'は、 "caption"で始まるidを持つすべての要素を選択することを意味します。私の答えにそれの緑色のチェックマークを付けることをお勧めします。 –

もう一度ありがとうございます。この回答は、私のJavaScriptの理解の転換点になっています。私は答えの上の矢印をマークしたが、緑色のチェックマークが見えなかった。 – user6642297

まずは@Red Mercuryに感謝したいと思います。彼の答えはJavaScriptの知識を大幅に向上させました。私はスタックオーバーフローを初めて知っていて、彼の答えを緑にする方法を知らない。もし金のマークがあれば、彼のためにやるだろう。ありがとう、赤い水銀。

私がしようとしていたのは、キャプションリストをスライドキャプションとして挿入することでした。 Javascriptの配列では簡単でしたが、ノードリストを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：ノードリストから配列への変換

答えて

関連する問題