DOM
에는 여러 객체를 포함하고 있다. 그중Node
자체의Method
들을 알아보도록 하자.
Node.appendChild
메서드는 많이 사용하는 메서드중 하나이다.
이 메서드는Node
를 자식으로써 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
</div>
<script src="index.js"></script>
</body>
// index.js
const $root = document.getElementById("root");
const div = document.createElement("div"); // "div" Element 를 만든다.
const textNode = document.createTextNode("Hello My World!!"); // Text Node 를 만든다.
div.appendChild(textNode); // 만들어진 div 에 textNode 를 자식으로써 추가한다.
$root.appendChild(div); // div 를 $root 에 자식으로써 추가한다.
Node.appendChild
는 이렇게 타켓 노드에 자식노드를 인자로 받아 추가하는 메서드이다.
Node.cloneNode
는 용어그대로Node
를 복제한다.
필요한 요소를 가져와clone
하여 재사용 가능하기 때문에 굉장히 유용하게 사용가능하다.
추가적으로 인자값을true
로 주면, 자식 요소도 복사한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="root">
<p>나는 자식이다</P>
</div>
<script src="index.js"></script>
</body>
/* index.css */
.root {
background-color: #ddd;
width: 100px;
height: 100px;
}
// index.js
const $root = document.querySelector(".root");
const cloneRoot1 = $root.cloneNode(); // .root 복사
const cloneRoot2 = $root.cloneNode(true); // .root 자식까지 복사.
document.body.appendChild(cloneRoot1);
/* <div class="root"></div> */
document.body.appendChild(cloneRoot2);
/* <div class="root">
<p>나는 자식이다</p>
</div> */
Node.removeChild
는 해당Node
의 자식을 제거하는 메서드이다.
보통Node
를 선택하고, 해당Node
의parentNode
속성으로 부모를 참조한이후, 해당Node
를 인자로 삽입하는 방식을 많이 사용하더라.자식노드를 삭제하기 위해서는 구조적으로 어쩔수 없는듯 하다.
Node.replaceChild
는 해당 부모Node
의 자식을 교체하는 메서드이다.
이때 첫번째 인자는 교체할Node
이며, 두번째 인자는 교체당할Node
이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="root">
<p>나는 곧 제거될것이야!!</P>
<p>나는 곧 교체될것이야!!</P>
</div>
<script src="index.js"></script>
</body>
</html>
const $p = document.getElementsByTagName(`p`);
const $firstP = $p[0];
const $secondP = $p[1];
const textNode = document.createTextNode('p');
changeP.innerHTML = '교체되었다!!!';
firstP.parentNode.removeChild(firstP); // firstP 삭제
secondP.parentNode.replaceChild(changeP, secondP); // secondP 를 chageP 로 교체
console.log(document.body.innerHTML);
/*
<div class="root">
<p>교체되었다!!!</p>
</div>
<script src="index.js"></script>
*/
Node.contains
는 해당Node
에 인자로 받은Node
가 있는지 확인하고, 있으면true
를, 없으면false
를 반환하는 메서드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="root">
</div>
<script src="index.js"></script>
</body>
</html>
const $root = document.querySelector(".root"); // .root class
const div = document.createElement("div");
// document 에는 없는 새로 만든 'div'
console.log(document.body.contains($root)); // true
console.log(document.body.contains(div)); // false
해당 요소가 생성되었는지 안되었는지 확인하는 용도로 적합하며, 많이 사용하는 메서드중 하나가 될 수 있을 것 같다.
Node.isEqualNode
는 두Node
가 동일한지 확인하는Method
이다.
이는 명확히 해야할것이,참조값
을 비교하는것이 아닌 두 노드가동일한 값
을 갖는지를 확인하는Method
이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="root">
</div>
<div class="root">
</div>
<p>foo</p>
<p>bar</p>
<script src="index.js"></script>
</body>
</html>
const $root = document.querySelectorAll(".root"); // [.root, .root]
const $p = document.querySelectorAll("p"); // [p, p]
console.log($root[0].isEqualNode($root[1])); // true
console.log($p[0].isEqualNode($p[1])); // false
두 노드가 완전히 동일한지가 아니라, 두 노드 참조가 동일한 노드를 참조하고 있는지 알고 싶다면
===
연산자를 사용하여 간단하게 확인해 볼 수 있다.출처: DOM 을 깨우치다
다음은 NodeList
아 HTMLCollection
에 대해 알아보도록한다.