HTMLのノードとは?
🔆 1.ノードは？
すべてのHTMLドキュメントを含む階層情報ユニット
HTML DOMには、 ノード(node)と呼ばれる階層単位に情報を格納する.
HTML DOMはこれらのノードを定義し、それらの関係を説明します.
下の写真を見れば分かります.
HTMLドキュメントの情報は次のとおりです. ノードツリー(node tree)と呼ばれる階層構造に格納される.
これらのノードツリーはノードの集合であり、ノード間の関係を示します.
ノードツリーは ルートノード(root node,写真中のDocument)から、 テキストノードに延長します.
JavaScriptでは、HTML DOMを使用してノードツリー内のすべてのノードにアクセスできます.
🔆 2.ノードタイプ
HTMLドキュメント内のすべてのコンテンツはノードであり、HTMLドキュメントを構成する代表ノードのタイプは次のとおりです.
ノード摘要nodeNameドキュメントノード(document node)は、HTMLドキュメント全体のノードdocument要素ノード(element node)のすべてのHTML要素が要素ノードであり、属性ノード(大文字)属性ノード(attribute node)のすべてのHTML要素の属性が属性ノードであり、要素ノードに関する情報を有する.属性名テキストノード(text node)HTMLドキュメント内のすべてのテキストがテキストノード#textアノテーションノード(comment node)HTMLドキュメント内のすべてのアノテーションがアノテーションノード#commentである
🔆 3.ノード間の関係
ノードツリーの一番上には
루트 노드(root node)しかありません.ルートノードを除いて、すべてのノードには
부모 노드(paranet node)が1つしかありません.各要素ノードは
자식 노드(child node)であってもよい.++)
兄弟ノード(sibling node):同じ親ノードを持つすべてのノード
祖先ノード(祖先ノード):親ノードモードを含むことで、現在のノードよりも階層的に高いすべてのノード
サブノード(Subscrendant Node):現在のノードよりも階層的に低いサブノードを含むすべてのノード
🔆 4.ノードを理解するための実際のドキュメントの作成
< base>
<!DOCTYPE html>
<head>
<title>JavaScript Node</title>
</head>
<body>
<p id="A"></p>
<p id="B"></p>
<script>
//여기에 코드 입력!!!
</script>
</body>
</html>根本の根本、ファイルは何ですか。
console.log(document)
htmlやhead、bodyなどを含む「オブジェクト」.
(1)getElementsByTagName()メソッド 使用方法
getElementsByTagName()メソッド 特定のタグ名を持つ すべての要素 ノードリスト形式 返却する.
(ただし現在クロムは
HTMLCollectionとして返されている…!エラー要素があるのでノードリストXを無条件に記憶する)したがって、このメソッドで返されるノードのリスト(またはHTML Collection)からノードにアクセスできます.
document.getElementsByTagName('img')(2)ノード リレーショナル・アクセスの方法
parentNode / childNodes/ firstChild/ lastChild/ nextSibling/ previousSibling
ノードにアクセスするには、これらを使用します.
(3)nodeNameでアクセスしてみる
💥 NodeName propertyは、ノードの一意の名前が格納されているため、読み取り専用propertyです.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Access</title>
</head>
<body>
<h1>nodeName 프로퍼티</h1>
<p id="document"></p>
<p id="html"></p>
<script>
// (1) HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택함.document.getElementById("document").innerHTML = document.childNodes[1].nodeName;// HTML
// (2) html 노드의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택함.document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName;// HEAD
</script>
</body>
</html>以上のコードの結果と原理を下図に示します.
ダイアログを開きます. ルートノードがあり、すべてのノードがその下にあります. childノードになります.
したがって,上記のコードは,(1)(2)と同じ結果を得る.
実際、childNodes[index]のindex値を変更すると、その値は上図と同じになります.
そして
#textはなぜかと思うかもしれません.ヘッドラベルとbodyラベルの間には何もないのに!ここで、＃textは空白を表す.実際、このように組み合わせておけば、
</head><!----><body>の代わりに#textを用いることができる.(4)nodeValueでアクセスしようとする
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Access</title>
</head>
<body>
<h1 id="heading">nodeValue 프로퍼티</h1>
<p id="text1">텍스트</p>
<p id="text2">텍스트</p>
<script>
var headingText = document.getElementById("heading").firstChild.nodeValue;
document.getElementById("text1").innerHTML = headingText;
document.getElementById("text2").firstChild.nodeValue = headingText;
</script>
</body>
</html>
IDが「heading」の要素のうちの第1のサブ要素の値(nodeValue)を変数(headingText)に割り当てて利用する.
上のコードでは、 innerHTMLとfirstChild.NodeValueの結果値は同じです.
nodeValuedの使い方...なんだよ.
NodeValueの使い方、説明します
element nodeに書き込むとnullが返されます.
テキストを返す場合は、elementノードにchildNodeを書き込んでtextノードを参照します.
そうだそうです…!
<記事の出所>
http://tcpschool.com/javascript/js_dom_node
Reference
この問題について(HTMLのノードとは?), 我々は、より多くの情報をここで見つけました https://velog.io/@keinn51/HTML에서-노드란-무엇인가テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol