노드 값 가져오기(1) - 자식이 같은 태그일 경우

nodeName, nodeValue

<div id="test">
    <span>SPAN1 태그</span>
    <span>SPAN2 태그</span>
    <span>SPAN3 태그</span>
    <span>SPAN4 태그</span>
</div>

 

자식이 같은 태그일 경우 자식들을 선택자로 잡아서 배열에 저장하면 된다.

let test=document.querySelector("#test");
let span=test.querySelector("span");

// span.length == 4
// span[0].nodeName, span[0].nodeValue
// span[0].childNodes[0].nodeName, span[0].childNodes[0].nodeValue

- span[0].nodeName은 SPAN, span[0].nodeValue는 null

- span[0].childNodes[0].nodeName은 #test, span[0].childNodes[0].nodeValue는 "SPAN1 태그"