39 / DOM

JinKris·2022년 1월 29일
0

DeepDive Modern Javascript

목록 보기
17/17
post-thumbnail

DOM

DOM은 브라우저 렌더링 엔진이 HTML문서를 파싱하여 생성한 자료구조이다.
문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.


(Node노드는 Document,ChracterData,Element,attr...등을 상속받는다)

HTML문서는 HTML요소의 집합으로 이뤄진다.
HTML요소는 렌더링 엔진에 의해 DOM을 구성하는 요소 노드 객체로 변환된다.
(HTML요소의 어트리뷰트 > 어트리뷰트 노드, HTML요소의 텍스트 콘텐츠 > 텍스트 노드)

HTML요소 간에는 중첩관계에 의해 부자관계가 형성된다. 이를 반영하여 HTML요소를 객체화한 모든 노드 객체들은 트리 자료 구조로 구성한다. 이 트리 자료 구조를 DOM이라 한다.

DOM API preivew

1) 요소노드취득

id, 태그, class, css선택자등으로 요소 노드를 취득
특정 요소 노드의 취득 가능 여부 확인

1.5) 살아 있는 객체
getElementsByTagName, getElementsByClassName 메서드는 실시간으로 반영하는 살아있는 DOM컬렉션 객체다. 코드를 작성했을때 내가 원하지 않는 방향으로 동작할 가능성이 있다.
이를 방지하기 위해서는
querySelectorAll(forEach사용가능)을 사용하거나 배열로 변환하여 사용하는 것이 좋다.

<body>
  <ul id="animal">
    <li>Cat</li>
    <li>Dog</li>
  </ul>
</body>
<script>
  const $animal = document.getElementById('animal);
  //childNodes 프로퍼티는 마찬가지로 live객체를 반환한다
  const {childNodes} = $animal;
  //스프레드 문법을 사용하여 객체를 배열로 변환하여 사용
  [...childNodes].forEach(childNode =>{
  	$animal.removeChild(childNode);
  });
</script>

2) 노드 탐색
공백 텍스트 노드, 요소 노드의 텍스트 노드
자식, 부모, 형제의 노드 탐색
자식 노드 존재 확인

3) 노드 정보 취득
nodeType, nodeName 프로퍼티...

4) 노드의 텍스트 조작
nodeValue, textContent(텍스트만 반환) 프로퍼티...

5) DOM조작
새로운 노드 생성, 추가, 삭제, 교체

innerHTML(마크업이 포함된 문자열을 그대로 반환) 프로퍼티 : 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어 있는 HTML마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영한다.

<script>
document.querySelector('#foo').innerHTML = 'Hi <span>there!</span>;
</script>

insertAdjacentHTML : 기존 요소를 제거하지 않으면서 위치르 지정해 새로운 요소를 삽입한다.

6) Attribute
attributes 프로퍼티(getter), Attribute getter와 setter, 존재 여부, 특정 속성 삭제...

7) ex
인라인 스타일 조작, 클래스 조작, 요소에 적용되어 있는 CSS스타일 참조...

profile
hello world

0개의 댓글