<자바스크립트 Javascript> DOM (3)

- 요소를 조작하기(DOM Manipulation)

1) 텍스트 노드에 접근/수정하기

텍스트 노드에 접근하는 방법은 아래와 같다.

: 요소 노드의 자식인 텍스트 노드의 부모 노드를 선택 -> firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색 -> 텍스트 노드의 프로퍼티(nodeValue)를 이용하여 텍스트를 취득 -> nodeValue를 이용하여 텍스트를 수정.

*nodeValue - 노드의 값을 반환함. 리턴값은 텍스트 노드이면 문자열, 요소 노드이면 null. IE6 이상의 브라우저에서만 사용가능.

*nodeName, nodeType으로 노드의 정보 취득 가능.

 

2) 어트리뷰트 노드에 접근/수정하기

어트리뷰트 노드에 접근/수정할 때는 다음의 프로퍼티나 메서드를 사용한다.

*className - class 어트리뷰트의 값을 취득 또는 변경함. className 프로퍼티에 값을 할당할 때는 class 어트리뷰트가 존재하지 않을 시 새로 생성하여 지정된 값을 설정함. 값이 여러개이면 split(' ')를 사용하여 배열로 변경하여 사용함.

*classList - add, remove, item, toggle, contains, replace 메서드를 제공함. IE10 이상의 브라우저에서만 사용가능.

*id - id 어트리뷰트의 값을 취득 또는 변경함. id 프로퍼티에 값을 할당할 때는 id 어트리뷰트가 존재하지 않을 시 새로 생성하여 지정된 값을 설정함.

*hasAttribute(attribute) - 지정한 어트리뷰트를 가지고 있는지 검사. 불리언 값으로 반환. IE8 이상의 브라우저에서만 사용가능.

*getAttribute(attribute) - 어트리뷰트의 값을 취득. 문자열을 반환.

*setAttribute(attribute, value) - 어트리뷰트와 어트리뷰트 값을 설정. undefined를 반환.

*removeAttribute(attribute) - 지정한 어트리뷰트를 제거. undefined를 반환.

 

 

- HTML 콘텐츠 조작(Manipulation)하기

아래의 프로퍼티 혹은 메서드를 사용한다. 단, 마크업이 포함된 콘텐츠를 추가하는 것은 주의가 필요하다.

*textContent - 요소의 텍스트 콘텐츠를 취득 혹은 변경. 마크업은 무시됨. textContent를 통해 새로운 텍스트를 할당하면 텍스트 변경이 가능함. 단, 순수한 텍스트만 지정이 가능. 마크업이 포함되면 문자열로 인식하여 그대로 출력됨. IE9 이상의 브라우저에서만 사용가능.

*innerText - 요소의 텍스트 콘텐츠에만 접근가능. 단, 여러 단점으로 사용을 권장하지 않음.

*innerHTML - 해당 요소의 모든 자식 요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득가능. 마크업을 포함하는 문자열임.

 

 

- DOM 조작 방식

innerHTML 프로퍼티를 사용하지 않고 새로운 콘텐츠를 추가하려면 DOM을 직접 조작해야한다. 한 개의 요소를 추가할 대 사용된다. 순서는 다음과 같다.

: 요소 노드를 생성하는 createElement() 메서드를 사용하여 새로운 요소 노드를 생성, createElement() 메서드의 인자로 태그 이름을 전달함 -> 텍스트 노드를 생성하는 createTextNode() 메서드를 사용하여 새로운 텍스트 노드를 생성, 이것이 생략되면 콘텐츠가 비어있는 요소가 됨 -> 생성된 요소를 DOM에 추가하는 appendChild() 메서드를 사용하여 ㅅ애성된 노드를 DOM tree에 추가 혹은 removeChild() 메서드를 사용하여 DOM tree에서 노드 삭제 가능.

 

 

- insertAdjacentHTML(position, string)

인자로 전달된 텍스트를 HTML로 파싱, 그 결과로 생성된 노드를 DOM 트리의 지정된 위치에 삽입함. 첫번째 인자는 삽입 위치를, 두번째 인자는 삽입할 요소를 표현한 문자열임.

*첫번째 인자로 올 수 있는 값 - beforebegin, afterbegin, beforeend, afterend

 

 

- innerHTML vs. DOM 조작 방식 vs. insertAdjacentHTML() 비교

정리하면, innerHTML과 insertAdjacentHTML()은 크로스 스크립팅 공격(XSS: Cross-Site Scripting Attacks)에 취약하다는 것이다. 신뢰할 수 없는 데이터는 특히 주의가 필요하다. 그러므로 텍스트를 추가 혹은 변경할 때에는 textContent, 새로운 요소의 추가 혹은 삭제시에는 DOM 조작 방식을 사용하는 것이 권장된다.

 

 

- style

style 프로퍼티를 사용하면 inline 스타일 선언 생성이 가능하다. 특정 요소에 inline 스타일을 지정할 때 사용된다. style 프로퍼티의 값을 취득하려면 window.getComputedStyle을 사용하면 된다. 해당 메서드는 인자로 주어진 요소의 모든 CSS 프로퍼티 값을 반환한다.

 

 

 

 

 

참고 : poiemaweb 웹사이트