DOM(Document Object Model)/CRUD

DOM이란?    

DOM은 HTML 및 XML 문서를 위한 프로그래밍 인터페이스입니다. 웹 페이즈 , XML 문서를 객체의 트리구조로 나타내고 여기서 각 객체는 요소, 속성 등과 같은 문서의 일부를 뜻합니다.

 

 

DOM의 주요 기능

 

• DOM은 독립적인 방식으로 HTML, XML 문서에 접근하고 조작하기 위해 표준화된 인터페이스입니다.
• 문서의 중첩된 요소와 텍스트 내용을 계층 구조로 나타냅니다.
• DOM은 동적이고 상호작용적인 웹 페이지와 프로그램을 만들 수 있도록 하는 웹 개발의 중요한 인터페이스입니다.

 

DOM을 JavaScript를 통해 조작하기.

CRUD

• createElement -CREATE
• querySelector, querySelector - READ
• textContent, id, classList, setAttribute - UPDATE 
• remove , removeChild, innerHTML = "", textContent = "" - DELEETE 
• appendChild - APPEND 

새로운 element를 만들어 변수에 할당합니다. CREATE ex)

const newtDiv = document.createElement('div')

CREATE에서 만든 newDiv를 body에 넣습니다 APPEND ex)

document.body.append(newDiv)

클래스 이름이 imelement인 HTML element 조회합니다. READ ex)

const imElement = document.querySelector('.imElement')

클래스 이름이 imElement인 HTML element 들을 모두 조회합니다. READ ex)

const weElements = document.querySelectorAll('imElement')

비어있는 newDiv엘리먼트에 문자열 입력하고  imElement 클래스 추가합니다. UPDATE ex) 

newDiv.content = 'div change';

newDiv.classList.add('imElement')

append 했던 엘리먼트를 삭제합니다. DELETE ex)

const testContainer = document.querySelector('#container')
const newDiv = document.createElement('div')
testContainer.append(newDiv)
newDiv.remove()