JS - Node 클래스, 프로퍼티
DOM 노드에 관련한 메모이지 Node.js 에 관한 메모가 아님을 알려드립니다.
클래스 상속 관계
DOM노드는 종류에 따라 내장 클래스가 다르고 대략적인 관계는 아래의 그림과 같다.
대표적인 클래스들의 특징은 아래와 같다.
EventTarget: 루트에 있는추상(abstract)클래스로, 이 클래스에 대응하는 객체는 실제로 만들어지지 않으며,EventTarget가 모든 DOM 노드의 베이스에 있기때문에 DOM 노드에서 ‘이벤트’를 사용할 수 있다.Node: 역시추상클래스로, DOM 노드의 베이스 역할을 합니다. getter 역할을 하는 parentNode, nextSibling, childNodes 등의 주요 트리 탐색 기능을 제공한다.Element: DOM 요소를 위한 베이스 클래스입니다. nextElementSibling, children 이나 getElementsByTagName, querySelector 같이 요소 전용 탐색을 도와주는 프로퍼티나 메서드가 이를 기반으로 합니다. 브라우저는 HTML뿐만 아니라 XML, SVG도 지원하는데 Element 클래스는 이와 관련된 SVGElement, XMLElement,HTMLElement클래스의 베이스 역할을 합니다.HTMLElement: HTML 요소 노드의 베이스 역할을 하는 클래스입니다. 아래 나열한 클래스들은 실제 HTML 요소에 대응하고HTMLElement를 상속받습니다.
노드의 타입, 이름 확인하기
해당 노드의 타입과 이름을 확인하기 위해서 다음과 같은 프로퍼티를 사용할 수 있다.
노드 타입의 값에 대해서는 링크를 통해서 확인가능하다.
const el = document.body;
console.log(document.noddeType); // 9 문서 객체
console.log(el.nodeType); // 1 요소노드
console.log(document.tagName); // undefined
console.log(document.nodeName); // #document
노드 조작 및 기타
요소 노드의 경우에는 흔히 사용하는 innerHTML 이나 outerHTML 로 다른 타입의 노드는 data 로 접근할 수 있다.
주의할 점은
outerHTML의 경우 기존 값을 수정하는 것이 아니라 새로운 조각을 만들어 넣는다는 것이다.
또한 textConent 를 통해 요소 노드 내에서 순수한 텍스트만 접근 할 수 있고 hidden 을 통해 display: none 과 같은 효과를 적용 시킬 수 있다.
<body>
<!-- comments -->
<header>
<h1>Notepad!!</h1>
<span>umm...</span>
</header>
<main>
<p>Test</p>
</main>
<script>
const pEl = document.querySelector("p");
pEl.outerHTML = "<p>New</p>";
console.log(pEl); // <p>Test</p>
pEl.innerHTML = "<p>New2</p>";
console.log(pEl); // <p>New2</p>
const comment = document.body.firstChild.nextSibling;
console.log(comment.data); // comments
const headerEl = document.querySelector("header");
console.log(headerEl.textContent); // Notepad!! umm...
setInterval(() => (pEl.hidden = !pEl.hidden), 1000);
</script>
</body>
outerHTML 과 innerHTML 을 같이 실행하면 console.log 값이 동일하다.
속성 프로퍼티, 메서드
속성 프로퍼티는 요소노드에서 그냥 확인 및 접근이 가능하지만 간혹 불가능한 경우(input 태그의 value) 아래의 메서드를 활용하여 수정하면 된다.
hasAttribute: 속성값 존재여부 확인getAttribute: 속성값 가져오기setAttribute: 속성값 지정하기removeAttribute: 속성제거attributes: 속성 컬렉션 반환
data-* 속성
커스텀 데이터를 관리하는 속성이다. 아래 예시와 같이 사용하면 값에 따라 적용되는 CSS를 다르게 쓸 수 있다.
<style>
.order[data-order-state="new"] {
color: green;
}
.order[data-order-state="pending"] {
color: blue;
}
.order[data-order-state="canceled"] {
color: red;
}
</style>
<div id="order" class="order" data-order-state="new">A new order.</div>
<script>
// 읽기
console.log(order.dataset.orderState); // new
// 수정하기
order.dataset.orderState = "pending";
</script>