Node、Element Node、ChildNode、Children

ドキュメントを構成するノードの系譜:親/子

ドキュメントを構成するドキュメント、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を使用してサブノードを選択します.
ただし、コメントもtextもノードに含まれます.

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

タグ間の空間(whilespace)もノードと考えられ,配列を占めている.
この問題を解決するために、子供を使います.

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はタグ形式のもののみをサブアイテムと見なします.