DOM 의 Node 객체 의 Method 들...
DOM에는 여러 객체를 포함하고 있다. 그중Node자체의Method들을 알아보도록 하자.
Node.appendChild
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.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.replaceChild
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.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.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 에 대해 알아보도록한다.
