HTML Node, Element

HTML 2022. 3. 26. 20:33

1. DOM(Document Object Model)

XML이나 HTML 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공하기 위한 일종의 인터페이스. JavaScript가 <html>, <head>, <body>와 같은 태그들에 접근하고 조작할 수 있도록 브라우저가 태그들을 트리 구조로 객체화 시킨 모델.

<!DOCTYPE html>
<html>
   <head>
       <style> ... </style>
       <script> ... </script>
   </head>
   <body>
      <h2>제목이다.</h2>
      <p>내용이다.</p>
   </body>
</html>

위와 같은 HTML 문서에서 DOM Node는 아래와 같이 계층적 구조로 표현될 수 있음

상위 하위
<!DOCTYPE html>
html	head	text
		style
		text
		script
		text
	text
	body	text
		h2	text → "제목이다."
		text
		p	text → "내용이다."
		text

2. DOM Node와 Element

DOM을 구성하는 각 Node들은 nodeType 속성을 갖고 있는데 <head>, <body>, <h2>, <p> 등 HTML에 입력하는 태그들은 nodeType = 1, 각 태그 사이의 문자열(<head>와 <body> 사이의 text)이나 태그 내부에 입력한 문자열(<h2> 내부의 '제목이다.' 문자열)을 나타내는 Text Node는 nodeType = 3이다. 즉, Element는 nodeType = 1인 Node를 의미함.

각 Element 사이의 text Node는 무엇인가?

위의 DOM Node 구조를 보면 내가 모르는 사이에 text Node가 삽입되어 있음을 알 수 있음. 해당 text Node는 내가 HTML 에디터에서 태그를 입력할 때 삽입했던 Enter를 나타냄.( <head> ... </head> 와 <body> ... </body> 사이의 Enter ) 해당 text Node의 textContent 속성을 보면 "\n "으로 나오는데, 에디터에서 각 태그 사이의 개행을 제거하면 해당 text Node는 사라짐.

<!DOCTYPE html>
<html>
  <head>    
       ...        <!--  head Node  -->
  </head>
                  <!--  text Node(개행)  -->
  <body>    
      ...         <!--  body Node  -->
  </body>
</html>

<!DOCTYPE html>
<html>
	<head> ... </head><body> ... </body>
</html>
<!--   태그 사이의 text Node를 제거하기 위한 방법!?   -->

※ 참고: What is the "text" child node of the html node?

3. Javascript에서의 Node

A. Element.querySelector()

const divs = document.querySelectorAll("div")

위 코드의 결과로 얻어진 변수 divs를 콘솔로 확인하면 NodeList로 나타남. 각각의 Node는 outerHTML과 같음

divs = {
	0: <div id="div1">내용1</div>         // divs[0]  첫 번째 요소 노드
    	1: <div id="div2">내용2</div>         // divs[1]  두 번째 요소 노드
    	2: <div id="div3">내용3</div>         // divs[2]  세 번째 요소 노드
    	3: <div id="div4">내용4</div>         // divs[3]  네 번째 요소 노드
    	length: 4
    }

	HTMLCollection	NodeList
특징	live	non-live
특징	유사 배열	유사 배열
메서드의 반환값	document.getElementsByTagName()	document.querySelectorAll()
메서드의 반환값	document.getElementsByClassName()	element.childNodes ─ (a)

(a) NodeList를 반환하나, live 객체

live 객체와 non-live 객체

DOM에 노드를 추가하거나 제거하는 등 변경이 있을 때

1. live 객체: 노드의 상태 변경을 실시간으로 반영

2. non-live 객체: 객체가 생성될 때의 상태를 유지(변경 X)

B. Node.nextSibling vs. Element.nextElementSibling

javascript에서 DOM을 조작하다 보면 해당 노드의 조상, 형제 관계의 노드를 선택할 필요가 생기는데, Node와 Element를 구분해서 사용해야 함. Node.nextSibling은 부모가 동일하면서 바로 다음에 위치한 Node를, Element.nextElementSibling는 부모가 동일하면서 바로 다음에 위치한 같은 Element를 반환함.

<body>
    <div id="div1">내용1</div>
    <div id="div2">내용2</div>
    <div id="div3">내용3</div>  
</body>

const div1 = document.querySelectorAll("div")[0]   // 첫번째 <div>

console.log(div1.nextSibling)                  // text Node
console.log(div1.nextElementSibling)    // 두번째 <div>

div1.nextSibling와 div1.nextElementSibling 두 결과를 비교해보면 div1.nextSibling은 바로 다음 text Node(에디터 상의 개행 문자열), div1.nextElementSibling은 바로 다음 <div> Node를 반환함. 따라서 동일한 태그의 형제 노드를 선택하고자 한다면 둘의 차이를 구별하고 있어야 함.