Javascriptノード
14002 ワード
📌 1.ノードとは?
📎 ノードとは?
HTML DOMは、ノードと呼ばれる階層単位に情報を格納する.HTML DOM은 노드들을 정의하고, 그 사이의 관계를 설명해주는 역할을 한다. HTMLドキュメントの情報は、ノードツリーと呼ばれる階層構造に格納される.これらのノードツリーはノードの集合であり、ノード間の関係を示します.ノードツリーは、最上位のルートノード(root node)から最下位のテキストノードまで延びます.JavaScriptでは、HTML DOMを使用してノードツリー内のすべてのノードにアクセスできます.
📎 ノードタイプ
👉 문서 노드(document node):HTMLドキュメント全体を表すノード.
👉 요소 노드(element node):すべてのHTML要素は要素ノードであり、属性ノードを持つことができる唯一のノードである.
👉 속성 노드(attribute node):すべてのHTML要素の属性は属性ノードであり、要素ノードに関する情報がある.ただし、要素ノードのサブノード(child node)には含まれません.
👉 텍스트 노드(text node):HTMLドキュメントのすべてのテキストはテキストノードです
ドキュメント内のすべてのアノテーションはアノテーションノードです
📎 ノード間の関係
ノードツリー内の各ノードは、互いに階層関係を確立します.
👉 parentNode:現在のノードの親ノードを返します.
👉 childNodes:1つの要素のすべてのサブ要素に近づくことができます.配列が返されます.
👉 firstChild:配列の最初のサブノードが返されます.childNodes[0]と同じです.
👉 lastChild:配列の最後のサブノードが返されます.childNodes.length-1]と同じです.
👉 nextSibling:現在のノードの次の兄弟ノードを返します.
👉 previousSibling:現在のノードの前の兄弟ノードを返します.
📌 2.ノードの追加と削除
📎 ノードの追加
👉 新しいノードを追加する方法
📎 ノードの追加
👉 新しいノードを追加する方法
📎 ノードの作成
ノードの説明createElement()は、新しい要素ノードを作成できます.新しいアトリビュートノードcreateAttribute()を作成できます.同じ名前のアトリビュートノードが既に存在する場合、既存のアトリビュートノードは新しいアトリビュートノードに置き換えられます.新しいテキストノードcreateTextNode()を作成できます.
📎 ノードの削除
ノード摘要removeChild()サブノードリストから特定のサブノードを削除します.ノードが正常に削除された場合は、削除されたノードが返されます.ノードが除去されると、除去されたノードのすべての子供も一緒に除去されます.removeAttribute()属性の名前を使用して、特定の属性ノードを削除します.
📎 ノードコピー
ノード説明CloneNode()既存のノードと同じ新しいノードを作成して返します.
📎 ノード置換
ノードの説明:ノード=親ノードが置き換えられました.置換Child(新しいサブノード、既存のサブノード)は、既存の要素ノードを新しい要素ノードで置換することができる.テキストノード.置換データ(オフセット、置換文字数、新しいデータ)のテキストノード上のテキストデータを置換できます.
📎 ノード使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>새로운 노드 추가 및 삭제</title>
<script>
var cnt1 = 1;
function addElement() {
// 이미지 태그 생성
var addImg = document.createElement("img"); //<img>
// 노드의 속성 추가
addImg.src = "../images/pic_" + cnt1 + ".jpg"; // <img src="../images/pic_1.jpg">
addImg.height = "100"; // <img src="../images/pic_1.jpg" height="100">
addImg.width = "100"; // <img src="../images/pic_1.jpg" height="100" width="100">
// 부모의 노드를 찾아서 새로운 노드를 추가
document.getElementById("target1").appendChild(addImg);
cnt1++;
if (cnt1 == 9) cnt1 = 1;
}
var cnt2 = 1;
function addText() {
var addP = document.createElement("p"); // p태그 생성
var addSpan = document.createElement("span"); // span태그 생성
var addText = document.createTextNode(cnt2 + "동적으로 텍스트가 추가됩니다."); // 텍스트 생성
addSpan.style = "color:red"; // 노드의 속성 추가
addSpan.appendChild(addText); // 부모의 노드를 찾아서 새로운 노드를 추가
addP.appendChild(addSpan); // 부모의 노드를 찾아서 새로운 노드를 추가
document.getElementById("target2").appendChild(addP); // 부모의 노드를 찾아서 새로운 노드를 추가
cnt2++;
}
function removeText() {
var node = document.getElementById("target2"); // 삭제하고 싶은 노드의 부모를 선택
// 마지막 노드 삭제 예시
// node.removeChild(node.lastChild); // 자녀 노드를 삭제
// cnt2--;
// 전체 노드 삭제 예시
for (var i = node.childNodes.length - 1; i >= 0; i--) {
node.removeChild(node.childNodes[i]);
}
cnt2 = 1;
}
</script>
</head>
<body>
<h2>첫번째 단락</h2>
<div id="target1"></div>
<h2>두번째 단락</h2>
<div id="target2"></div>
<button onclick="addElement()">추가1</button>
<button onclick="addText()">추가2</button>
<button onclick="removeText()">삭제</button>
</body>
</html>📖 リファレンス
Reference
この問題について(Javascriptノード), 我々は、より多くの情報をここで見つけました https://velog.io/@alicesykim95/Javascript-Node-노드テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol