JavaScript 2 DOMツリーの参照
13148 ワード
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h2 id="title-1">Cat-1</h1>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<h2 id="title-2">Cat-2</h1>
<ul id="list-2">
<li>Sphynx</li>
<li>Munchkin</li>
<li>Persian</li>
<li>Norwegian Forset</li>
<li>Turkish Angora</li>
<li>Bombay</li>
<li>Selkirk Rex</li>
<li>Munchkin</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>// DOM 트리 여행하기
const myTag = document.querySelector('#list-1');
console.log(myTag);
// 형제 요소 노드: 이전 형제와 다음 형제로 구분됨.
// sibling: 형제
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);
// 부모 요소 노드-->parentElement프로퍼티 사용.content의 부모태그인 body태그 선택됨
console.log(myTag.parentElement);
// 자식 요소 노드-->children 프로퍼티는 해당 요소의 자식 요소를 담고 있다.
console.log(myTag.children[1]);//->1번 인덱스인 브리티쉬 숏헤어
console.log(myTag.firstElementChild);//->랙돌
console.log(myTag.lastElementChild);//->러시안 블루
DOMツリーの設定時
ブラウザがHTMLコードを解析すると、各コードは状況に応じてノードを作成し、DOMツリーを整理します.
HTMLタグは要素ノードになります.
テキストはテキストノードです.
コメントもコメントノードとしてDOMツリーに反映されます.
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
I Love JavaScript
<!-- I Love Codeit -->
</body>
</html>
ただし、テキストノードの赤い線の部分から分かるように、タグとタグの間の改行とインデントによるオフセットもテキストノード(テキストとしてマークされている)によって生成される.
現在の例は簡単なので、DOMツリーをある程度予測できますが、コードが少し複雑であるか、コードスタイルが固定されていない場合は、これらの改行とインデントによって生成されるテストノードの存在を特定するのは難しいです.
したがって、すべてのノードが共有するPropertyを使用する場合、予想外のテキストノードが選択され、ビジネスで予想外の結果が得られます.
一般的に私たちが処理する対象はTAGです!
JavaScriptを使用してWebドキュメントを処理する場合、通常はテキストノードではなく要素ノードを使用します.
HTMLタグをターゲットにしている場合は、エレメントノードのモバイルプロトコルを利用した方が安全でしょうか?
ただし、状況によっては、要素ノードではなくノードを移動する必要がある場合がありますので、すべてのノードに共通のプロパティがあることを覚えておいてください.
この点を覚えておいてください.これは非常に役に立ちます!:)
Reference
この問題について(JavaScript 2 DOMツリーの参照), 我々は、より多くの情報をここで見つけました https://velog.io/@kimhyesu-_-/JavaScript2DOM-트리-여행하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol