Node와 Element Node 그리고 childNodes, children

문서를 구성하는 노드들의 계보: 부모/자식

문서를 구성하는 document, body, div 등을 모두 노드라고 하고
이는 부모, 자식 관계가 있다.

ChildNodes를 이용한 선택

HTML

<section id="section4">
    <h1>Ex4 : ChildNodes를 이용한 노드 선택</h1>
    <div class="box">
        <input type="text">
        <input type="text">
    </div>
</section>

JavaScript

//Ex4 : ChildNodes를 이용한 선택
window.addEventListener("load",function(){
    var section4 = document.querySelector("#section4");
    var box = section4.querySelector(".box");
    var input1 = box.childNodes[0];
    var input2 = box.childNodes[1];
    input1.value = "hello";
    input2.value = "okay";
});

childNodes를 이용하면 자식노드들을 선택할 수 있다.
하지만, #comment,#text들도 모두 노드에 포함되기 때문에

<div class="box">     <input type="text">

태그 사이의 공간(while space) 또한 Node로 인식돼서 배열을 차지한다.
이를 해결하기위해 children을 사용한다.

Children을 이용한 선택

JavaScript

//Ex4 : ChildNodes를 이용한 선택
window.addEventListener("load",function(){
    var section4 = document.querySelector("#section4");
    var box = section4.querySelector(".box");
    var input1 = box.children[0] //childNodes[0];
    var input2 = box.children[1] //childNodes[1];
    input1.value = "hello";
    input2.value = "okay";
});

Children은 태그 형태로 돼있는것만 자식으로 간주한다.