[JS] DOM

DOM

Document Object Model

문서 객체 모델

 

웹 페이지를 스크립트 또는 프로그래밍 언어들이 사용할 수 있는 구조로 표현하는 방법

HTML이나 XML 문서 내의 모든 요소를 정의하고 각각의 요소에 접근할 수 있는 계층 구조

 

 

DOM은 트리구조의 형태를 가짐

HTML 문서의 각 요소는 DOM의 노드(node)에 해당

 

 

▶ 노드 (node) 종류

Document Node	Element Node	Text Node	Attribute Node
전체 페이지를 나타냄 트리구조 최상위에 위치	HTML 요소를 나타냄 >> 태그 (body, div, p 등등)	HTML 요소 내부의 문자열 >> 태그 없이 작성하는 애들	HTML 요소 내부의 속성 >> src, alt

 

 

 

 

좌: 박스 하나하나가 노드(node)  //  우: 구조 예시

 

 

 

 

// ID로 요소 선택하기

let ex = document.getElementById("ex");

 

// 클래스 이름으로 요소 선택하기

let ex = document.getElementByClassName("ex");

 

// 태그 이름으로 요소 선택하기

let ex = document.getElementByTagName("p");

 

// CSS 선택자로 요소 선택하기

let highlight = document.querySelector('.highlight');

let highlight = document.querySelectorAll('.highlight');

 

// 요소 내부의 텍스트 변경하기

ex.textContent = "텍스트 수정함";

 

// 새로운 요소를 생성 추가하기

let newEx = document.createElement('p');

newEX.textContent = "새로운 p"

document.body.appendChild(newEX)

 

// 요소 삭제하기

var ex = document.getElementById("ex");

var parent = ex.parentElement;

parent.removeChild(ex);