ノード

HTML DOMは、ノードと呼ばれる階層単位に情報を格納する.HTML DOMは、これらのノードを定義し、それらの関係を説明することができる.

ノードツリー(ノードツリー)

HTMLドキュメントの情報は、ノードツリーと呼ばれる階層構造に格納されます.これらのノードツリーはノードの集合であり、ノード間の関係を示します.ノードツリーは、最上位のルートノード(root node)から最下位のテキストノードまで延びます.

兄弟ノード(sibling node)-同じ親ノードを持つすべてのノード
祖先ノード(祖先ノード)-親ノードを含むすべてのノードで、現在のノードより階層的に高い
サブノード(Subscrendant Node)-現在のノードよりも階層的に低いサブノードを含むすべてのノード.

1.代表的なノードのタイプ

-ドキュメントノード(ドキュメント):HTMLドキュメント全体を表します.
-要素ノード(element):HTML要素を表し、属性ノードを持つ唯一のノードです.
-属性ノード(attribute):HTML要素の属性を表し、要素ノードに関する情報があります.ただし、エレメントノードのサブノードにはエレメントノードは含まれません.
-テキストノード(text):HTMLドキュメント内のすべてのテキストを表します.
-コメントノード(comment):HTMLドキュメント内のすべてのコメントを表します.

2.ノード間アクセス

ノード間の関係
-parentNode:親ノード
-childNodes:サブノードリスト
-firstChild:最初のサブノード
-lastChild:最後のサブノード
-nextSibling:次の兄弟ノード
-previousSibling:前の兄弟ノード
ノードについて
-nodeName:ノードの一意の名前
-nodeValue:ノード値
-nodeType:ノード固有タイプ
NodeTypeプロパティ値
要素ノード(1)|属性ノード(2)|テキストノード(3)
アノテーションノード(8)|ドキュメントノード(9)

3.ノードリスト（ノードリスト）

ノードリストは、HTMLドキュメントと同じ順序で、ドキュメント内のすべてのノードをリスト形式で格納します.リスト内の各ノードは、ゼロから始まるインデックスを使用してアクセスできます.

// document 객체의 첫번째 자식 노드를 child1에 지정 후, 노드 이름 출력
let child1 = document.childNodes[0]; 
document.write(child1.nodeName);

// body의 첫번째 자식 노드를 child2에 지정 후, 노드 값 출력
let child2 = document.body.firstChild;
document.write(child2.nodeValue);

// 아이디가 brother인 요소의 이전 형제 노드를 sibling1에 지정 후, 노드 타입 출력
let sibling1 = document.getElementById("brother").previousSibling;
document.write(sibling1.nodeType);

4.ノードの追加

-appendChild():ノードのサブノードリストの最後に新しいノードを追加
-insertBefore():新しいノードを特定のサブノードに直接追加する前に
qquad親ノード.InsertBefore(新しいサブノード、標準サブノード);
-insertData():ネストされたデータにテキストノードを新しいテキストとして追加
qquadテキストノード.InsertData(オフセット、新規データ);
-append()-ノードの最後にノードまたは文字列を挿入
-prepend()-ノードの前にノードまたは文字列を挿入
-before()-ノードの前にノードまたは文字列を挿入
-after()-ノードの後にノードまたは文字列を挿入
-replaceWith()-ノードを新しいノードまたは文字列で置換

5.ノードの作成

-createElement():新しい要素ノードの作成
-createAttribute():新しい属性ノードの作成
-createTextNode():新しいテキストノードの作成

let div1 = document.createElement('div');
let class1 = document.createAttribute("class");
let textNode1 = document.createTextNode('안녕하세요.');  

6.ノードの削除

-removeChild():サブノードリストから特定のサブノードを削除
-removeAttribute():属性の名前を使用して特定の属性ノードを削除

7.ノードコピー

-cloneNode():既存のノードと同じ新しいノードを作成して戻します.

8.ノード操作

-nodeValue:ノード値の変更
-setAttribute():属性値の変更
qquadsetAttribute("属性名"、"属性値");
-replaceChild():既存の要素ノードを新しい要素ノードに置き換えます.
qquad置換するノード=親ノード.Child(新しいサブノード、既存のサブノード)を置き換えます.
-replaceData():テキストノードのテキストデータを置換
qquadテキストノード.置換データ(オフセット、置換文字数、新しいデータ);

// 아이디가 text인 노드의 값 변경
let text = document.getElementById('text');
text.nodeValue = "텍스트 변경";

// 아이디가 abc인 요소의 title 속성을 New title로 변경
document.getElementById( 'abc' ).setAttribute( 'title', 'New title' );

参考資料
🔗 TCP School
🔗 javascript.info