DOM - Node 조작

2020-06-13

해당 Post는 DOM Node 조작하기에 대해 정리한 파일입니다.

DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있습니다.

DOM APIs에서는 다양한 메서드와 속성을 지원하고 있으니 이를 활용하는 방법을 배울 필요가 있습니다.

이제 부터 배울 다양한 DOM API는 라이브러리를 쓰는 것보다 대체로 더 빠릅니다.( 그 차이가 크진 않습니다)

물론 라이브러리보다 그 사용법이 불편하고 어려울 수는 있습니다.

하지만 low-level의 DOM API를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉽고

어떤 문제를 해결할때도 더 유리할 것입니다.

1. DOM 조작하기 API

documet. 으로 사용할 수 있는 APIs

Link : 링크 타고가기

자주 사용하는 것 몇가지만 뽑아서 예를 들자면?

* addEventListener() : Attaches an event handler to the document(문서에 이벤트 핸들러 연결)

* createAttribute()	        Creates an attribute node(특성 노드 생성)
* createComment()               Creates a Comment node with the specified text(지정된 텍스트로 주석 노드 생성)
* createDocumentFragment()	Creates an empty DocumentFragment node(빈 DocumentFragment 노드 생성)
* createElement()         	Creates an Element node(요소 노드 생성)
* createEvent()	                Creates a new event(새 이벤트 만들기)

* getElementById()	        Returns the element that has the ID attribute with the specified value(지정한 값을 가진 ID 속성을 가진 요소를 반환함)
* getElementsByClassName()	Returns a HTMLCollection containing all elements with the specified class name(지정된 클래스 이름을 가진 모든 요소를 포함하는 HTMLCollection 반환)
* getElementsByName()	        Returns a HTMLCollection containing all elements with a specified name(지정된 이름의 모든 요소를 포함하는 HTMLCollection 반환)
* getElementsByTagName()        Returns a HTMLCollection containing all elements with the specified tag name(지정된 태그 이름을 가진 모든 요소를 포함하는 HTMLCollection 반환)

element. 으로 사용할 수 있는 APIs

Link : 링크 타고가기

element의 API들은 Document보다 더 많습니다.

2. DOM 엘리먼트 오브젝트

몇 가지 유용 DOM 엘리먼트 속성

  • tagName : 엘리먼트의 태그명 반환
  • textContent : 노드의 텍스트 내용을 설정하거나 반환
  • nodeType : 노드의 노드 유형을 숫자로 반환

DOM 탐색 속성

*childNodes 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)

  • firstChild 엘리먼트의 첫 번째 자식 노드를 반환
  • firstElementChild 첫 번째 자식 엘리먼트를 반환
  • parentElement 엘리먼트의 부모 엘리먼트 반환
  • nextSibling 동일한 노드 트리 레벨에서 다음 노드를 반환
  • nextElementSibling 동일한 노드 트리 레벨에서 다음 엘리먼트 반환

DOM 조작 메소드

  • removeChild() 엘리먼트의 자식 노드 제거

  • appendChild() 마지막 자식 노드로 자식 노드를 엘리먼트에 추가

  • insertBefore() 기존 자식노드 앞에 새 자식 노드를 추가

  • cloneNode() 노드를 복제

  • replaceChild() 엘리먼트의 자식 노드 바꿈

  • closest() 상위로 올라가면서 가장 가까운 엘리먼트를 반환

HTML을 문자열로 처리해주는 DOM 속성 / 메소드

  • innerText 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환

  • innerHTML 지정된 엘리먼트의 내부 html을 설정하거나 반환

  • insertAdjacentHTML() HTML로 텍스트를 지정된 위치에 삽입