[JS] 문서 객체 모델(DOM) 1 - DOM이란? / document 객체와 관련 메소드

웹/JavaScript

[JS] 문서 객체 모델(DOM) 1 - DOM이란? / document 객체와 관련 메소드

nyJae 2022. 10. 27. 18:44

문서 객체 모델(DOM)이란?

1. DOM의 계층 구조 (노드 트리, HTML 문서 트리)

2. Document 객체

1) HTML 요소 선택 메소드

2) HTML 요소 생성 메소드

3) HTML 이벤트 핸들러 추가 메소드

4) HTML 객체 집합

3. DOM 요소의 선택 및 변경

문서 객체 모델(DOM, Doucument Object Model) : HTML 또는 XML 문서에 접근하기 위한 일종의 인터페이스.
Document 객체와 관련된 객체들의 집합.

↳ 모든 HTML 요소는 HTML DOM의 표준화된 방법을 통해 접근 가능.

↳ 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

↳ 웹 문서의 구조화된 표현을 제공하여 웹 문서의 모든 요소들을 자바스크립트로 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.

DOM에서는 HTML의 모든 태그가 객체이고, 태그 내의 문자(text)도 객체이다.

자바스크립트는 DOM을 이용하여 다음과 같은 작업을 할 수 있다.

새로운 HTML 요소나 속성을 추가
존재하는 HTML 요소나 속성을 제거
HTML 문서의 요소를 변경
HTML 문서의 속성을 변경
HTML 문서의 CSS 스타일을 변경
HTML 문서에 새로운 HTML 이벤트를 추가
HTML 문서의 이벤트에 반응

1. DOM의 계층 구조 (노드 트리, HTML 문서 트리)

2. Document 객체

Document 객체는 웹 페이지 그 자체이다.

웹 페이지에 존재하는 HTML 요소에 접근할 때는 반드시 Document 객체부터 시작한다.

Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

↳ 요소 선택 / 요소 생성 / 이벤트 핸들러 추가 / 객체 선택

1) HTML 요소 선택 메소드

document.getElementByTagName("태그이름") : 해당 태그 이름의 요소를 모두 선택
document.getElementById("아이디") : 해당 아이디의 요소를 선택
document.getElementByClassName("클래스이름") : 해당 클래스에 속한 요소를 모두 선택
document.getElementByName("name속성값") : 해당 name 속성값을 가지는 요소를 모두 선택
document.querySelectorAll("선택자") : 해당 선택자로 선택되는 요소를 모두 선택

2) HTML 요소 생성 메소드

document.createElement("HTML요소") : 저장된 요소를 생성
document.write("텍스트") : HTML 출력 스트림을 통해 텍스트를 출력 *기존에 존재했던 HTML 문서 내용을 지우고 실행된다.

3) HTML 이벤트 핸들러 추가 메소드

document.getElementById("아이디").onclick = function() {실행할 코드} : 마우스 클릭 이벤트와 연결된 이벤트 핸들러 코드를 추가

4) HTML 객체 집합

document.anchors : name 속성을 가지는 <a> 요소를 모두 반환
document.body : <body> 요소를 반환
document.cookie : HTML 문서의 쿠키(cookie)를 반환
document.domain : HTML 문서가 위치한 서버의 도메인 네임(domain name) 을 반환
document.forms : <form> 요소를 모두 반환
document.images : <img> 요소를 모두 반환
document.links : href 속성을 가지는 <area> 요소와 <a> 요소를 모두 반환
document.referrer : 링크(linking) 되어 있는 문서의 URI를 반환
document.title : <title> 요소를 반환
document.URL : HTML 문서의 완전한 URL 주소를 반환
document.baseURI : HTML 문서의 절대 URI(absolute base URI)를 반환
document.doctype : HTML 문서의 문서 타입(doctype)을 반환
document.documentElement : <html> 요소를 반환
document.documentMode : 웹 브라우저가 사용하고 있는 모드를 반환
document.documentURI : HTML 문서의 URI를 반환
document.embeds : <embed> 요소를 모두 반환
document.head : <head> 요소를 반환
document.implementation : HTML DOM 구현(implementation)을 반환
document.inputEncoding : HTML 문서의 문자 인코딩(character set) 형식을 반환
document.lastModified : HTML 문서의 마지막 갱신 날짜 및 시간을 반환
document.readyState : HTML 문서의 로딩 상태(loading status)를 반환
document.scripts : <script> 요소를 모두 반환
document.strictErrorChecking : 오류의 강제 검사 여부를 반환

3. DOM 요소의 선택 및 변경

1) DOM 요소의 선택

HTML 요소에 접근하여 요소를 조작하기 위해서는 우선 해당 요소를 선택해야 한다.

HTML 태그 이름, 아이디, 클래스, name 속성, CSS 선택자, HTML 객체 집합을 이용하여 특정 HTML 요소를 선택할 수 있다.

2) DOM 요소의 변경

[DOM 요소의 내용 변경] - innerHTML 프로퍼티 이용

let str = document.getElementById("text");

str.innerHTML = "이 문장으로 변경";

[DOM 요소의 속성 변경] - 요소의 속성 이름 이용

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

link.href = "/javascript/intro"; // 요소의 href 속성값을 변경

link.innerHTML = "자바스크립트 수업 바로 가기";     // 요소의 내용을 변경

[DOM 요소의 스타일 변경] - style 프로퍼티 이용

// style 프로퍼티 사용법
style.CSS속성이름

let str = document.getElementById("text");

function changeColor() {str.style.color = "green"};   //요소의 글자색을 초록색으로 변경