Web/Javascript

[Javascript] 문서 객체 모델(DOM) 2 - DOM에 요소 추가하기, DOM 트리를 활용해 원하는 노드 다루기

kimbangul 2021. 3. 23. 17:51

웹 문서에 있는 요소는 단순히 태그만 있는 것이 아니라, 태그 속성과 내용을 함께 사용합니다. 그래서 <h1>이나 <p> 태그를 추가하고 싶다면 단순히 <h1>이나 <p> 태그에 해당하는 요소 노드뿐만 아니라 태그 안에 있는 텍스트 내용과 속성도 노드로 추가해야 합니다.

 

예를 들어,

<p class="accent"> 주문이 완료되었습니다.</p>

 

라는 소스를 DOM 트리에 추가하려면 p 요소 노드와 "accent" 속성 값을 넣을 class 속성 노드, '주문이 완료되었습니다. 라는 텍스트를 넣을 텍스트 노드가 필요합니다. 그리고 이렇게 만든 노드를 부모 노드에 연결해서 웹 문서에 추가합니다.

 

새로운 노드를 만들거나 부모 노드에 연결할 때는 다음 함수를 사용합니다.

 

  1. createElement() : 새 요소 노드를 만듭니다.
  2. createTextNode(): 텍스트 내용이 있을 경우 텍스트 노드를 만듭니다.
  3. appendChild(): 텍스트 노드를 요소 노드에 자식 노드로 추가합니다.
  4. createAttribute(): 요소에 속성이 있을 경우 속성 노드를 만듭니다.
  5. setAttributeNode(): 속성 노드를 요소 노드에 연결합니다.
  6. appendChild(): 새로 만든 요소 노드를 부모 노드에 추가합니다.

 

 

웹 문서에 노드 추가하기

 

요소 노드 만들기 - createElement() 함수

> var newP = document.createElement("p");

 

텍스트 노드 만들기 - createTextNode() 함수

> var newText = document.createTextNode("주문이 완료되었습니다.");

 

자식 노드로 추가하기 - appendChild() 함수

 

새로운 <p> 노드와 거기에 사용할 텍스트 노드를 만들었으나, 노드가 만들어지기만 하고 서로 부모 노드와 자식 노드로 연결되지 않은 상태입니다. newText를 newP 노드의 자식 노드로 추가하는 소스를 콘솔 창에 작성합니다.

 

> newP.appendChild(newText);

 

새로 만든 <p> 태그 소스는 웹 문서의 <body> 태그 안에 추가해야 하므로 newP 노드를 body 노드의 자식 노드로 추가합니다.

 

> document.body.appendChild(newP);

 

속성 노드 만들기 - createAttribute(); 함수

 

새로운 속성 노드를 만들 때는 createAttribute() 함수를 사용하며 함수의 괄호 안에 추가할 속성 이름을 지정합니다.

새로운 class 속성 노드를 만들어 변수 attr에 저장합니다. 그리고 attr.value를 사용해 attr 속성 값을 "accent" 로 지정합니다.

 

> var attr = document.createAttribute("class");
> attr.value = "accent";
< "accent"

 

속성 노드 연결하기 - setAttributeNode() 함수

 

> newP.setAttributeNode(attr);

 

setAttribute() 함수를 사용하면 더 간단하게 속성을 지정할 수 있습니다.

 

> newP.setAttribute("class","accent");

 

 

DOM 트리를 활용해 원하는 노드 다루기

 

자식 노드 확인하기 - hasChildNodes() 함수

 

hasChildNodes() 함수는 특정 노드에 자식 노드가 있는지를 확인하는 함수입니다. 자식 노드가 있다면 true를 , 그렇지 않다면 false를 반환합니다.

 

> document.querySelectorAll("p")[0].hasChildNodes()
< true // 자식 노드가 존재!

 

 

자식 노드에 접근하기 - childNodes 속성

 

자식 노드가 있다면 childNodes 속성을 사용해서 현재 노드의 자식 노드에 접근할 수 있습니다.

이 때 요소 노드 뿐만 아니라 태그와 태그 사이의 줄바꿈도 빈 텍스트 노드인 자식 노드로 인식합니다.

자식 노드는 한 개일 수도 있고 여러 개일 수도 있기 때문에 속성 이름이 복수형입니다.

 

만약 자식 노드 중에서 텍스트 노드와 주석 노드는 필요하지 않고 요소 노드에만 접근한다면 children 속성을 사용하면 됩니다.

 

> documnet.querySelector("#nameList").children
< HTMLCollection(3)[p,p,p]

 

 

원하는 위치에 노드 삽입하기 - insertBefore() 함수

 

자식 노드를 추가하는 appendChild() 함수는 부모 노드에 자식 노드가 있을 경우 마지막 자식 노드로 추가됩니다.

하지만 insertBefore() 함수를 사용하면 부모 노드에 자식 노드를 추가할 때 기준이 되는 노드를 지정하고 그 앞에 자식 노드를 추가할 수 있습니다.

 

> var nameList = document.querySelector('#nameList')
< undefined
> nameList.insertBefore(nameList.children[2], nameList.children[0])
< <p>...</p>

 

첫 번째 매개변수에는 추가할 노드를, 두 번째 매개변수에는 기준이 될 노드를 적습니다.

 

 

특정 노드 삭제하기 - removeChild() 함수와 parentNode 속성

 

DOM 트리에 있는 노드를 삭제할 때는 removeChild() 함수를 사용합니다. 함수 이름에서 알 수 있듯이 부모 노드에서

자식 노드를 삭제하는 함수이고, 괄호 안에는 삭제하려는 자식 노드가 들어갑니다.

 

노드는 스스로 자신을 삭제할 수 없기 때문에 부모 노드에 접근한 후 부모 노드에서 삭제해야 합니다. 

그래서 특정 노드를 삭제하려고 할 때 그 노드의 부모 노드를 먼저 찾아야 하는데, 부모 노드 정보를 가지고 있는

속성이 parentNode 속성입니다. parentNode 속성은 현재 노드의 부모 요소 노드를 반환합니다.