TIL 11 | JavaScript DOM Tree
17131 ワード
<!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); // <ul id="list-1">...</ul>1.兄弟要素ノードに移動
.previousElementSibling
.nextElementSibling
console.log(myTag.previousElementSibling);
// <h2 id="title-1">Cat-1</h1>, 이전 형제 요소, 요소가 없으면 null 출력
console.log(myTag.nextElementSibling);
// <h2 id="title-2">Cat-2</h1>, 다음 형제 요소, 요소가 없으면 null2.親要素ノードに移動
.parentElement
console.log(myTag.parentElement);
// <div id="content">... </div> 해당 태그의 부모요소3.サブエレメントノードに移動
.children[index]
.firstElementChild
.lastElementChild
console.log(myTag.children[1]);
// <li>British Shorthair</li> 해당 요소의 두번째 자식요소
console.log(myTag.firstElementChild);
// <li>Ragdoll</li> 해당 요소의 첫번째 자식 요소
console.log(myTag.lastElementChild);
// <li>Russian Blue</li> 해당 요소의 두번째 자식 요소4.複合
console.log(myTag.parentElement.nextElementSibling);
// <script src="index.js"></script>5.innerHTML
innerHTMLは、要素の値をチェックするのではなく、変更に使用されます.
// innerHTML
console.log(myTag.innerHTML);
/* <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> */
// 들여쓰기와 줄바꿈 모두 반영되어 출력myTag.innerHTML = '<li>Exotic</li>'
// 선택된 요소의 자식 요소가 요소가 이값으로 교체된다.
myTag.innerHTML += '<li>Exotic</li>'
// 기존 HTML 마지막 부분에 요소를 추가하는 식6.outerHTML
innerHTMLなど、改行やインデントは出力に含まれます.
console.log(myTag.outerHTML);
/*<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>*/myTag.outerHTML = '<ul id ="new-liest"><li>Exotic </li></ul>'
// 선택된 요소가 완전히 사라지고 새 값으로 교체된다.7. textContent
要素内の内容はhtml以外のテキストのみ出力されます.
/*
Ragdoll
British Shorthair
Scottish Fold
Bengal
Siamese
Maine Coon
American Shorthair
Russian Blue
*/myTag.textContent = 'new text!'
// innerHTML과 같에 요소 안 자식 요소의 내용이 완전히 교체된다. textContent는 모든 값을 문자열로 반환하기 때문에 html 특수문자도 코드 그 자체로 문자열로 수정된다.Reference
この問題について(TIL 11 | JavaScript DOM Tree), 我々は、より多くの情報をここで見つけました https://velog.io/@pca0046/TIL-11-JavaScript-DOM-Treeテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol