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를 가진 모든 요소를 선택하는 것을 의미합니다. 내 대답에 녹색 체크 표시를하면 도움이됩니다. –

다시 한번 감사드립니다. 이 대답은 자바 스크립트를 이해하는데 전환점이됩니다. 나는 대답의 맨 위 화살표를 표시했지만 녹색 체크 표시가 보이지 않았습니다. – user6642297

우선 @Red Mercury에 감사 드리며 그의 대답이 JavaScript에 대한 지식을 크게 향상 시켰습니다. Stack Overflow에 익숙하지 않고 그의 답변을 녹색으로 표시하는 방법을 모르지만 금 표식이 있다면 그를 위해 할 것입니다. 레드 머큐리 감사합니다.

캡션 목록을 슬라이드 캡션으로 넣으려고했습니다. 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 : 노드 목록에서 배열로 변환

답변

관련 문제