DOM

DOM

• 텍스트 파일의 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저 렌더링 엔진은 이를 위해 웹 문서를 load하고 parsing 하여, DOM을 생성하고 이를 메모리에 적재한다.
• DOM이란, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들의 부자 관계가 표현된 트리 구조이다.
• DOM은 JS를 통해 동적으로 변경할 수 있으며, 변경된 DOM은 리렌더링 된다.

• 정적인 웹페이지를 동적으로 조작하기 위한 방법은, 메모리 상에 존재하는 DOM을 변경하는 것이다. 그리고 이때 필요한 것이 DOM API이다. DOM API는 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합이다.
• DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 최상위 객체인 Document 객체의 자식이다.
• DOM tree의 진입점은 document의 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.

DOM Manipulation

HTML 콘텐츠 조작

innerText

• innerText 프로퍼티를 사용하여도 요소의 텍스트 콘텐츠에만 접근할 수 있다. 하지만 아래의 이유로 사용하지 않는 것이 좋다.
◦ 비표준이다.
◦ CSS에 순종적이다. 예를 들어 CSS에 의해 비표시(visibility: hidden;)로 지정되어 있다면 텍스트가 반환되지 않는다.
◦ CSS를 고려해야 하므로 textContent 프로퍼티보다 느리다

innerHTML

• 해당 요소의 모든 자식 요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득할 수 있다. 이 문자열은 마크업을 포함한다.

DOM 조작

createElement(tagName)

• 태그이름을 인자로 전달하여 요소를 생성한다.
• Return: HTMLElement를 상속받은 객체
• 모든 브라우저에서 동작한다.

createTextNode(text)

• 텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
• Return: Text 객체
• 모든 브라우저에서 동작한다.

appendChild(Node)

• 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
• Return: 추가한 노드
• 모든 브라우저에서 동작한다.

removeChild(Node)

• 인자로 전달한 노드를 DOM 트리에 제거한다.
• Return: 추가한 노드
• 모든 브라우저에서 동작한다.

insertAdjacentHTML(position, string)

• 인자로 전달한 텍스트를 HTML로 파싱하고 그 결과로 생성된 노드를 DOM 트리의 지정된 위치에 삽입한다. 첫번째 인자는 삽입 위치, 두번째 인자는 삽입할 요소를 표현한 문자열이다. 첫번째 인자로 올 수 있는 값은 아래와 같다.
    ◦ beforebegin
    ◦ afterbegin
    ◦ beforeend
    ◦ afterend

• 모든 브라우저에서 동작한다.

둘 다 DOM트리 내 객체에 접근하여 조작하는 것인데, 하나는 해당 노드의 html contents를 , 그리고 하나는 직접 그 노드 자체를 조작한다고 생각하자.

 

 

출처

https://poiemaweb.com/js-dom