브라우저의 자바스크립트(2) - DOM 요소 접근, 조작

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• <DOM 요소 접근, 탐색, 조작>
• 1. DOM 요소에 접근
• 1-1) get메소드를 이용
  1-2) DOM요소 쿼리
  1-3) DOM Traversing(탐색)
• 2. DOM 요소 조작
• 2-1) 텍스트 노드에의 접근/수정
  2-2) 어트리뷰트 노드에의 접근/수정
  2-3) HTML 콘텐츠 조작(Manipulation)
  2-4) DOM을 직접 조작
  ※ innerHTML vs. DOM 조작 방식

 

<DOM 요소 접근, 조작>

DOM을 통해 웹페이지를 조작(manipulate)하기 위해서는 탐색과 조작 과정이 필요하다. 자바스크립트는 이것에 필요한 수단(API)을 제공한다.

• 조작하고자하는 요소를 선택 또는 탐색
• 선택된 요소의 콘텐츠 또는 어트리뷰트를 조작

 

1. DOM 요소에 접근

DOM요소를 탐색에는 아래와 같은 방법 세가지가 있다.

 

1-1) get메소드를 이용

document.getElementById()	ID를 이용해 요소를 탐색
document.getElementsByClassName()	주어진 클래스 이름에 해당되는 요소를 반환
document.getElementsByTagName()	주어진 태그 이름에 해당되는 요소를 반환

 

1-2)  DOM요소 쿼리

document.querySelector()	CSS선택자를 사용해 요소를 찾음. 선택자에 해당하는 첫번째 요소만 탐색함.
document.querySelectorAll()	CSS선택자를 사용해 요소를 찾음. 선택자에 해당하는 모든 요소를 배열로 가져옴.

 

1-3) DOM Traversing(탐색)

자식 노드 탐색	hasChildNodes()	자식 노드가 있는지 확인하고 Boolean 값을 반환한다.
	Children	자식 노드를 모두 가져와 유사 배열의 형태로 반환. ※element.querySelectorAll()과 다른 점은 children으로 가져 온 HTMLCollection은 live라서 실시간으로 노드의 상태를 반영한다.
	firstElementChild,  lastElementChild	첫번쨰/ 마지막 자식 노드를 탐색.
	childNodes	자식 노드의 컬렉션을 반환. 해당 요소 하위에 존재하는 모든 text node와 comment node를 포함하여 반환. 태그 사이의 공백이나 띄어쓰기도 text node로 인지하여 반환.
형제 노드 탐색	previousSibling,  nextSibling	형제 노드를 탐색. text node를 포함한 모든 형제 노드를 탐색한다.
	previousElementSibling,  nextElementSibling	형제 노드를 탐색. 형제 노드 중에서 Element type 요소만을 탐색한다.
부모 노드 탐색	parentNode	해당 요소의 부모 요소에 접근.  parentNode를 여러 번 사용하여 상위로 계속 거슬러올라갈 수 있다. 최종적으로 document node까지 타고 올라가고 그 이상은 null값이 출력된다.
	parentElement	해당 요소의 부모 노드를 탐색.  parentNode와 똑같은 역할을 하지만 element 요소만 탐색하므로 까지 거슬러올라간 이후에 그 상위 요소에 접근하려고 하면 null값을 출력한다.

 

 

2. DOM 요소 조작

• 텍스트를 추가 또는 변경시에는 textContent, 새로운 요소의 추가 또는 삭제시에는 DOM 조작 방식을 사용하도록 한다.
• innerHTML은 크로스 스크립팅 공격(XSS)에 취약하다. 따라서 untrusted data의 경우, 주의하여야 한다.

 

2-1) 텍스트 노드에의 접근/수정- 모든 요소에 존재하는 nodeName, nodeType을 통해 노드의 정보를 취득할 수 있다.

1. 해당 텍스트 노드의 부모 노드를 선택한다. 텍스트 노드는 요소 노드의 자식이다.
   
2. firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색한다.
   
3. 텍스트 노드의 유일한 프로퍼티(nodeValue)를 이용하여 텍스트를 취득한다.
   
4. nodeValue를 이용하여 텍스트를 수정한다.

 

2-2) 어트리뷰트 노드에의 접근/수정

className	class 어트리뷰트의 값을 취득 또는 변경. className 프로퍼티에 값을 할당하는 경우, class 어트리뷰트가 존재하지 않으면 class 어트리뷰트를 생성하고 지정된 값을 설정한다. class 어트리뷰트의 값이 여러 개일 경우, 공백으로 구분된 문자열이 반환되므로 String 메소드 split(' ')를 사용하여 배열로 변경하여 사용한다.
classList	add, remove, item, toggle, contains, replace 메소드를 제공.
id	id 어트리뷰트의 값을 취득 또는 변경. id 프로퍼티에 값을 할당하는 경우, id 어트리뷰트가 존재하지 않으면 id 어트리뷰트를 생성하고 지정된 값을 설정한다.
hasAttribute(attribute)	지정한 어트리뷰트를 가지고 있는지 검사.
getAttribute(attribute)	어트리뷰트의 값 취득.
setAttribute(attribute, value)	어트리뷰트와 어트리뷰트 값을 설정.
removeAttribute(attribute)	지정한 어트리뷰트 제거.

 

2-3) HTML 콘텐츠 조작(Manipulation) - 모든 요소에 존재하는 textContent, innerHTML을 통해 콘덴츠에 접근하거나 수정할 수 있지만, 두 프로퍼티를 수정하는 것은 파괴적인 작업이므로 주의한다.

textContent	요소의 텍스트 콘텐츠 취득 또는 변경. 이때 마크업은 무시됨. 새로운 텍스트를 할당하면 텍스트 변경 가능. 이때 순수한 텍스트만 지정해야 하며 마크업을 포함시키면 문자열로 인식되어 그대로 출력된다. (XSS에 취약하다.)
innerText	요소의 텍스트 콘텐츠에만 접근.  innerText의 단점 :  비표준이다.  CSS에 순종적이다. 예를 들어 CSS에 의해 (visibility: hidden;)로 지정되어 있다면 텍스트가 반환되지 않는다.  CSS를 고려해야 하므로 textContent 프로퍼티보다 느리다
innerHTML	해당 요소의 모든 자식 요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득. 이 문자열은 마크업을 포함함.

 

2-4) DOM을 직접 조작 - 한 개의 요소를 추가하는 경우 사용

1. 요소 노드 생성 createElement() 메소드를 사용하여 새로운 요소 노드를 생성한다. createElement() 메소드의 인자로 태그 이름을 전달한다.
2. 텍스트 노드 생성 createTextNode() 메소드를 사용하여 새로운 텍스트 노드를 생성한다. 경우에 따라 생략될 수 있지만 생략하는 경우, 콘텐츠가 비어 있는 요소가 된다.
3. 생성된 요소를 DOM에 추가 appendChild() 메소드를 사용하여 생성된 노드를 DOM tree에 추가한다. 또는 removeChild() 메소드를 사용하여 DOM tree에서 노드를 삭제할 수도 있다.

createElement(tagName)	태그이름을 인자로 전달하여 요소를 생성한다.
createTextNode(text)	텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
appendChild(Node)	인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
removeChild(Node)	인자로 전달한 노드를 DOM 트리에 제거한다.

 

※ innerHTML vs. DOM 조작 방식

• innerHTML

장점	단점
DOM 조작 방식에 비해 빠르고 간편하다.	XSS공격에 취약점이 있기 때문에 사용자로 부터 입력받은 콘텐츠(untrusted data: 댓글, 사용자 이름 등)를 추가할 때 주의하여야 한다.
간편하게 문자열로 정의한 여러 요소를 DOM에 추가할 수 있다.	해당 요소의 내용을 덮어 쓴다. 즉, HTML을 다시 파싱한다. 이것은 비효율적이다.
콘텐츠를 취득할 수 있다.

• DOM 조작 방식

장점	단점
특정 노드 한 개(노드, 텍스트, 데이터 등)를 DOM에 추가할 때 적합하다.	innerHTML보다 느리고 더 많은 코드가 필요하다.