모던 자바스크립트 : DOM

1. 노드

브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM 생성

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API,즉 프로퍼티와 메서드 제공하는 트리 자료구조

a. HTML 요소와 노드 객체

HTML 요소

HTML 요소 : HTML 문서를 구성하는 개별적인 요소

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM 구성하는 요소 노드 객체로 변환

HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환

 

HTML 문서

HTML 문서는 HTML 요소들의 집합으로 이뤄지며 HTML 요소는 중첩 관계를 가짐

HTML 요소의 콘텐츠 영역(시작태그와 종료 태그 사이)에는 텍스트뿐만 아니라 다른 HTML 요소도 포함 가능

HTML 요소 간에는 중첩 관계에 의해 계층적인 부자 관계 형성

HTML 요소 간의 부자 관계를 반영해 HTML 문서의 구성요소인 HTML 요소를 객체화한 모든 노드 객체들을 트리자료구조로 구성

 

트리 자료구조

트리 자료 구조는 노드들의 계층구조로 이뤄짐

트리 자료 구조는 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조

트리 자료구조는 하나의 최상위 노드에서 시작하며 최상위 노드는 부모노드 없고 루트노드라고 함

루트 노드는 0개 이상의 자식 노드를 가짐

자식 노드가 없는 노드를 리프 노드라고 함

비선형 : 자료구조는 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조

ex) 트리와 그래프

선형 : 하나의 자료 뒤에 하나의 자료만 존재하는 자료구조

ex) 배열, 스택, 큐, 링크드 리스트, 해시 테이블

2진트리 : 2개의 자식 노드를 가짐

 

DOM

DOM(=DOM 트리) : 노드 객체들로 구성된 트리자료

 

b. 노드 객체의 타입

DOM은 노드 객체의 계층적인 구조로 구성됨

노드 객체는 12개의 종류가 있고 상속 구조를 가짐

 

 

 

문서노드

문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로 document 객체를 가리킴

document 객체는 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체로 전역 객체의 window의 document 프로퍼티에 바인딩됨

문서노드는 window.document 또는 documet로 참조 가능

 

브라우저 환경의 모든 자바스크립트 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window 공유

모든 자바스크립트 코드는 전역 객체window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라봄 => HTML 문서 당 document 객체는 유일

 

문서 노드(document 객체)는 DOM 트리의 루트 노드이므로 DOM 트리의 노드들에 접근하기 위한 진입점 역할 담당

요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야함

 

요소 노드

요소 노드 : HTML 요소를 가리키는 객체

요소 노드는 HTML 요소 간의 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보 구조화

요소노드는 문서의 구조를 표현함

 

어트리뷰트 노드

어트리뷰트 노드 : HTML 요소의 어트리뷰트를 가리키는 객체

어트리뷰트 노드는 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결

요소 노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 부모노드가 아닌 요소노드에만 연결

=> 어트리뷰트 노드에 접근해 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근

 

텍스트 노드

텍스트 노드 : HTML 요소의 텍스트를 가리키는 객체

텍스트 노드는 문서의 정보 표현

텍스트 노드는 요소 노드의 자식 노드, 자식 노드를 가질 수 없는 리프 노드

텍스트 노드는 DOM 트리의 최종단

텍스트 노드에 접근하려면 요소 노드에 접근

 

공백 텍스트 노드

공백 텍스트 노드 : HTML 요소 사이의 개행이나 공백은 텍스트 노드가 됨

 

이외에도 주석을 위한 Comment 노드, DOCTYPE을 위한 DocumentType 노드, 복수의 노드를 생성해 추가할 때 사용하는 DocumentFragment 노드 등  

c. 노드 객체의 상속 구조

DOM은 HTML 문서의 계층적 구조와 정보 표현

이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조

DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API 사용 가능

이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색 할 수 있고 자신의 어트리뷰트와 텍스트 조작 가능

DOM 구성하는 노드 객체는 ECMAScript 사양에 정의된 표준 빌트인 객체가 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체

노드 객체도 자바스크립트 개체라서 프로토타입에 의한 상속 구조를 가짐

 

요소 노드는 Element 인터페이스 상속받은

요소 노드는 추가적으로 HTMLElement와 태그의 종류별로 세분화된 HTMLHtmlElement, HTMLHeadElement, HTMLBodyElement, HTMLUListElement 등의 인터페이스 상속 받음

input 요소를 파싱하여 객체화한 input 요소 노드 객체는 HTMLInputElement, HTMLElement, Element, Node, EventTarget, Object의 prototype에 바인딩되어 있는 프로토타입 객체 상속

input 요소 노드 객체는 프로토타입 체인에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용 가능

input 요소 노드 객체도 다양한 특성을 갖는 객체이며 이러한 특성을 나타내는 기능들을 상속을 통해 제공 받음

노드 객체의 상속 구조는 개발자 도구의 Elements 패널 우측의 Properties 패널에서 확인 가능

노드 객체에는 공통 기능, 타입에 따라 고유한 기능 있음

노드 객체는 공통 기능일 수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축해 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속 구조 가짐

 

HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통적인 기능이 있음

이벤트 관련 기능은 EventTarget 인터페이스가 제공

트리 탐색 기능과 정보 제공 기능은 Node 인터페이스가 제공

input, div 요소 노드 객체는 HTML 요소의 스타일을 나타내는 style 프로퍼티가 있음

HTML 요소가 갖는 공통 기능은 HTMLElement 인터페이스가 제공

 

HTML 요소의 종류에 따라 고유한 기능도 있음

input 요소 노드 객체에는 value  프로퍼티 필요

필요한 기능을 제공하는 인터페이스(HTMLInputElement, HTMLDivElement 등)가 HTML 요소의 종류에 따라 각각 다름

 

DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서더의 집합인 DOM API로 제공

DOM API를 통해 HTML의 구조나 내용, 스타일 등을 동적 조작 가능

 

2. 요소 노드 취득

HTML의 구조나 내용, 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야함

텍스트 노드는 요소 노드의 자식 노드, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텍스트 노드나 어트리뷰트 노드를 조작할때도 마찬가지

a. id를 이용한 요소 노드 취득

Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색해 반환

getElementById 메서드는 Document.prototype의 프로퍼티 => 문서 노드인 document 통해 호출

id 값은 HTML 문서 내에서 유일한 값

중복된 id 값을 갖는 HTML 요소가 여러개 존재하더라도 에러 발생 안함

여러개인 경우 첫번째 요소 노드만 반환

값이 없는 경우 null 반환

HTML 요소에 Id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있음

단, id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 전역 변수에 노드객체가 재할당되지 않음

 

 

 

b. 태그 이름을 이용한 요소 노드 취득

Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색해 반환

여러개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체 반환

함수는 하나의 값만 반환할 수 있어 여러개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아 반환

class 어트리뷰트와는 달리 공백 문자로 구분해 여러개의 값을 가질 수 없음

getElementsByTagName 메서드가 반환하는 DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블

HTML 문서의 모든 요소 노드를 취득하려면 getElementsByTagName 메서드의 인수로 '*' 전달

 

getElementsByTagName 메서드는 Document.prototype에 정의된 메서드와 Element.prototype에 정의된 메서드가 있음

Document

DOM의 루트 노드인 문서 노드, 즉 document 통해 호출하며 DOM 전체에서 요소 노드를 탐색해 반환

Element

특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중에서 요소 노드 탐색해 반환

인수로 전달된 태그 이름을 갖는 요소가 없는 경우 빈 HTMLCollection 객체 반환

 

c. class를 이용한 요소 노드 취득

Document.prototype/Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든 요소 노드들을 탐색하여 반환

인수로 전달한 class 값은 공백으로 구분해 여러개의 class 지정 가능

여러개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체 반환

Document

DOM의 루트 노드인 문서노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색해 반환

Element

특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중 요소 노드 탐색해 반환

값이 없는 경우  빈 HTMLCollection 객체 반환

d. CSS 선택자를 이용한 요소 노드 취득

CSS 선택자는 스타일을 적용하고자하는 HTML 요소를 특정할 때 사용하는 문법

querySelector, querySelectorAll 메서드는 Document.prototype, Element.prototype에 정의된 메서드가 있음

Document

DOM의 루트 노드인 문서노드, 즉 document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색해 반환

Element

특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중 요소 노드 탐색해 반환

querySelector, querySelectorAll 메서드는 getElementsBy~ 메서드보다 다소 느린것으로 알려짐

하지만 CSS 선택자 문법을 사용하여 좀 더 구체적인 조건으로 요소 노드를 취득할 수 있고 일관된 방식으로 요소 노드를 취득 가능

=> id 어트리뷰트 있는 요소 노드 취득 시 getElementById 사용, 그 외에는 querySelector, querySelectorAll 사용 권장

Document.prototype/Element.prototype.querySelector 메서드는 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드 탐색해 반환

인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 여러개인 경우 : 첫번째 요소 노드만 반환

인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 : null

인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 : DOMException 에러 발생

 

Document.prototype/Element.prototype.querySelectorAll 메서드는 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드 탐색해 반환

querySelectorAll 메서드는 여러개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체 반환

NodeList 객체는 유사배열 객체이면서 이터러블

인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 : 빈 NodeList 객체 반환

인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 : DOMException 에러 발생

HTML 문서의 모든 요소 노드를 취득하려면 querySelectorAll 메서드의 인수로 전체 선택자 '*' 전달

 

e. 특정 요소 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드는 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드는 이벤트 위임을 사용할 때 유용

f. HTMLCollection과 NodeList

DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러개의 결과값을 반환하기 위한 DOM 컬렉션 객체

HTMLCollection과 NodeList는 유사배열 객체이면서 이터러블 => for...of문, 스프레드 문법 사용 가능

HTMLCollection과 NodeList의 중요한 특징

HTMLCollection는 언제나 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체

단, NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있음

 

HTMLCollection

getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체 => 살아있는 객체라고 부르기도 함

HTMLCollection 객체는 실시간으로 노드 객체의 상태 변경을 반영해 요소 제거할 수 있기 때문에 HTMLCollection 객체를 for문으로 순회하면서 노드 객체의 상태를 변경해야할 때 주의해야함

 

 

이 문제는 for문을 역방향으로 순회하는 방법으로 회피하거나

while문을 사용해 HTMLCollection 객체에 노드객체가 남아있지 않을 때까지 무한 반복하는 방법으로 회피 가능

근본적인 해결책은 HTMLCollection 객체를 사용하지 않는 것

유사 배열 객체이면서 이터러블인 HTMLCollection 객체를 배열로 변환하면 부작용을 발생시키는 HTMLCollection 객체 대신 배열의 고차 함수인 foreach, map, filter, reduce 등 사용 권장

 

 

NodeList

HTMLCollection 객체의 부작용을 해결하기 위해 getElementsByTagName, getElementsByClassName 메서드 대신 querySelectorAll 메서드 사용

querySelectorAll 메서드는 DOM 컬렉션 객체인 NodeList 객체 반환

이때 NodeList 객체는 실시간으로 노드 객체의 상태 변경을 반영하지 않는 객체

querySelectorAll이 반환하는 NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용 가능

NodeList.prototype.forEach 메서드는 Array.prototype.forEach 메서드와 사용방법 동일

NodeList.prototype은 forEach 외에도 item, entried, keys. values 메서드 제공

NodeList 객체는 대부분의 경우 노드 객체의 상태 변경을 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체도 동작

하지만 chiledNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의 필요

 

HTMLCollection이나 NodeList객체는 예상과 다르게 동작할 때가 있어 다루기 까다롭고 실수하기 쉬움

=> 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션 사용하려면 HTMLCollection이나 NodeList객체를 배열로 변환하여 사용하는 것 권장

HTMLCollection이나 NodeList객체가 메서드를 제공하기는 하지만 배열의 고차함수만큼 다양한 기능은 아님

HTMLCollection이나 NodeList객체를 배열로 변환 시 고차함수를 사용할 수 있음

3. 노드 탐색

요소 노드를 취득한 다음 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색해야하는 경우

DOM 트리 상의 노드를 탐색할 수 있도로 Node, Element 인터페이스는 트리 탐색 프로퍼티 제공

parentNode, previousSibling, firstChild, childNodes 프로퍼티는 Node.prototype 제공

프로퍼티 키에 Element가 포함된 previousElementSibling, nextElementSibling과 children 프로퍼티는 Element.prototype이 제공

노드 탐색 프로퍼티는 모두 접근자 프로퍼티

단, 노드 탐색 프로퍼티는 setter 없이 getter만 존재해 참조만 가능한 읽기 전용 접근자 프로퍼티

읽기 전용 접근자 프로퍼티에 값을 할당하면 아무런 에러 없이 무시됨

a. 공백 텍스트 노드

공백 텍스트 노드 : HTML 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드 생성

텍스트 에디터에서 HTML 문서에 스페이스 키, 탭 키, 엔터 키 등을 입력하면 공백 문자 추가됨

노드 탐색 시 공백 텍스트 노드에 주의 해야함

 

 

 

 

b. 자식 노드 탐색

자식 노드 탐색할 때 사용하는 노드 탐색 프로퍼티

c. 자식 노드 존재 확인

Node.prototype.hasChildNodes 메서드 : 자식 노드가 존재하면 true, 존재하지 않으면 false qksghks

텍스트 노드를 포함해 자식 노드의 존재 확인

자식 노드 중에 텍스트 노드가 아닌 요소 노드가 존재하는지 확인하려면 hasChildNodes 메서드 대신 children.length 또는 Element 인터페이스의 childElementCount 프로퍼티 사용

 

d. 요소 노드의 텍스트 노드 탐색

요소 노드의 텍스트 노드는 요소 노드의 자식 노드 => 요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근 가능

firstChild 프로퍼티는 첫번째 자식 노드 반환

firstChild 반환한 노드는 텍스트 노드이거나 요소 노드

e. 부모 노드 탐색

Node.prototype.parentNodes 프로퍼티 : 텍스트 노드는 DOM 트리의 최종단 노드인 리프노드이므로 부모노드가 텍스트 노드인 경우는 없음

 

f. 형제 노드 탐색

어트리뷰트 노드는 요소 노드와 연결되어 있지만 부모 노드가 같은 형제 노드가 아니라서 반환되지 않음

아래 프로퍼티는 텍스트 노드 또는 요소 노드만 반환

4. 노드 정보 취득

 

5. 요소 노드의 텍스트 조작

a. nodeValue

Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티 => 참조와 할당 모두 가능

노드 객체의 nodeValue 프로퍼티 참조 시 노드 객체의 값 반환

노드 객체의 값이란 텍스트 노드의 텍스트

만약 텍스트 노드가 아닌 노드의 nodeValue 프로퍼티 참조 시 null 반환

 

텍스트 노드의 nodeValue 프로퍼티에 값 할당 시 텍스트 노드의 값, 텍스트 변경 가능

텍스트 변경할 요소 노드의 취득 후 취득한 요소 노드의 텍스트 노드 탐색

텍스트 노드는 요소 노드의 자식 노드이므로 firstChild 프로퍼티 사용해 탐색

탐색한 텍스트 노드의 nodeValue 프로퍼티를 사용해 텍스트 노드의 값 변경

b. textContent

Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 퓌득하거나 변경

요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역(시작 태그와 종료 태그 사이) 내의 텍스트 모두 반환

요소 노드의 childNodes 프로퍼티가 반환한 모든 노드들의 텍스트 노드의 값, 텍스트 모두 반환

이때 HTML 마크업 무시

 

nodeValue 프로퍼티 참조 시 텍스트 취득 가능

텍스트 노드가 아닌 노드의 nodeValue 프로퍼티는 null 반환해 의미가 없음

nodeValue 프로퍼티 사용시 textContent 프로퍼티 사용할때보다 코드가 더 복잡함

요소 노드의 콘텐츠 영역에 자식 요소 노드가 없고 텍스트만 존재 시 firstChild.nodeValue와 textContent 프로퍼티는 같은 결과 반환

이 경우 textContent 프로퍼티 사용하는 것이 코드가 더 간단함

요소 노드의 textContent 프로퍼티에 문자열 할당 시 요소 노드의 모든 자신 노드 제거되고 할당한 문자열이 텍스트로 추가됨

이때 할당한 문자열에 HTML 마크업이 포함되어있더라도 문자열 그대로 인식되어 텍스트로 취급

HTML 마크업이 파싱되지 않음

textContent 프로퍼티와 유사한 동작을 하는 innerText 프로퍼티가 있음

innerText는 지양

innerText 프로퍼티는 CSS에 순종적

예를 들어 innerText 프로퍼티는 CSS에 의해 비표시로 지정된 요소 노드의 텍스트를 반환하지 않음

innerText 프로퍼티는 CSS를 고려해야하므로 textContent 프로퍼티보다 느림

 

 

6. DOM 조작

DOM 조작은 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제, 교체하는 것

DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트 발생

a. innerHTML

Element.prototype.innerHTML : 요소 노드의 HTML 마크업 취득하거나 변경

setter, getter 모두 존재하는 접근자 프로퍼티

요소 노드의 innerHTML 프로퍼티 참조 시 요소 노드의 콘텐츠 영역 내에 포함된 모든 HTML 마크업을 문자열로 반환

innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로 반환

 

요소 노드의 innerHTML 프로퍼티에 문자열 할당 시 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영됨

 

innerHTML 프로퍼티 사용해 HTML 마크업 문자열로 간단히 DOM 조작 가능

 

요소 노드의 innerHTML 프로퍼티에 할당한 HTML 마크업 문자열은 렌더링 엔진에 의해 파싱되어 요소 노드의 자식으로 DOM에 반영

이때 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 크로스 사이트 스크립팅 공격(XSS)에 취약해 위험함

HTML 마크업 내에 자바스크립트 악성 코드가 포함되어 있다면 파싱 과정에서 그대로 실행될 가능성이 있기 때문

 

HTML 새니티제이션 

HTML 새니티제이션 : 사용자로부터 입력받은 데이터에 의해 발생할 수 있는 크로스 사이트 스크립팅 공격을 예방하기 위해 잠재적 위험을 제거하는 기능

새니티제이션 함수를 직접 구현할 수도 있겠지만 DOMPurify 라이브러리를 사용하는 것 권장

DOMPurify 잠재적 위험을 내포한 HTML

마크업을 새니티제이션(살균)하여 잠재적 위험 제거

 

innerHTML 프로퍼티의 단점

요소 노드의 innerHTML 프로퍼티에 HTML 마크업 문자열을 할당하는 경우 요소 노드의 모든 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하는 것

innerHTML 프로퍼티는 복잡하지 않은 요소를 새롭게 추가할때 유요하지만 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입해야할 때는 사용하지 않는 것이 좋음

b. insertAdjacentHTML 메서드

Element.prototype.insetAdjacentHTML(position, DOMString)메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소 삽입

insetAdjacentHTML 메서드는 두번째 인수로 전달한 HTML 마크업 문자열(DOMString)을 파싱하고 그결과로 생성된 노드를 첫번째 인수로 전달한 위치(position)에 삽입해 DOM에 반영

첫번째 인수로 전달할 수 있는 문자열은 beforebegin, afterbegin, beforeend, afterend

 

 

 

c. 노드 생성과 추가

d. 복수의 노드 생성과 추가

e. 노드 삽입

f. 노드 이동

g. 노드 복사

h. 노드 교체

i. 노드 삭제

 

7. 어트리뷰트

a. 어트리뷰트 노드와 attributes 프로퍼티

b. HTML 어트리뷰트 조작

c. HTML 어트리뷰트 vs DOM 프로퍼티

d. data 어트리뷰트와 dataset 프로퍼티

 

8. 스타일

a. 인라인 스타일 조작

b. 클래스 조작

c. 요소에 적용되어 있는 CSS 스타일 참조

 

9. DOM 표준