DOM

DOM

DOM (Document Object Model)

DOM 이란 웹페이지의 HTML 을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다.

JavaScript 는 이 모델로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다.

DOM 은 HTML 인 웹 페이지와 스크립팅 언어(JavaScript)를 서로 잇는 역할을 합니다.

우리는 JavaScript 의 document 라는 전역 객체를 통해 HTML 에 접근할 수 있습니다. document 객체는 DOM 구조를 접근하는 관문이며 웹 페이지 그 자체를 의미한다고 말할 수 있습니다.

HTML 에 접근하는 이유

document 객체는 DOM 트리의 root node 에 접근하게 해줍니다. document 객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있습니다.

이렇게 접근을 해 요소의 class, id, style 등을 다 수정할 수 있습니다.

요소의 내용은 innerHTML 으로 접근하고 수정할 수 있습니다.

document.body.innerHTML = '내용 삭제';

위 코드는 body 태그 내부의 모든 것을 '내용 삭제' 라는 텍스트로 바꾼 것 입니다.

특정 요소에 접근하고 싶을 때는 tag, class, id 와 같은 CSS selector 로 접근이 가능합니다.

let blueElement = document.querySelector('.blue'); blueElement.style.backgroundColor = 'blue';

createElement() 메서드는 지정한 tagName 의 HTML 요소를 만들어 반환합니다. 요소를 만들기만 했을 뿐 아직 HTML 의 어디에 들어가야 할 지 지정해준 것이 아닙니다.

만든 요소는 어딘가의 요소에 append 시켜주어야 합니다.

apendChild() 메서드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메서드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다.

className() 메서드는 특정 요소의 클래스 속성값을 가져오거나 설정할 수 있습니다.

from http://dev-taeyeong.tistory.com/14 by ccl(A) rewrite - 2021-12-25 21:26:52