[HTML5] 11-1 문서 객체 모델

문서 객체 모델(DOM)

*문서 객체 -> HTML 문서의 각 요소를 자바스크립트에서 사용할 수 있도록 객체로 만든 것

*DOM -> 브라우저가 HTML 문서에 접근할 수 있도록 정의해 놓은 표준 모델

           -> HTML 문서를 분석하고 표시하는 방식

*문서가 적재되면 브라우저는 정적으로 DOM 생성

: 계층적인 구조를 갖는 트리로 표현 -> DOM 트리

: 자바스크립트를 이용하면 프로그램 실행 중에 웹 문서의 내용, 구조 및 스타일에 대한 작업 가능

-> 결과가 즉각적으로 화면에 반영됨

 

 

 

 

문서 객체 모델

 

 

 

 

DOM 객체의 접근 방법

-id 속성을 이용한 방법

* getElementById("아이디명")

-> id="아이디명" 속성을 갖는 오직 하나의 요소만 선택

 

 

-요소명을 이용한 방법

* getElementsByTagName("요소명")

-> 지정한 요소명을 사용하는 모든 요소를 찾아 리스트 형태로 반환

 

 

-클래스명을 이용한 방법

* getElementsByClassName("클래스명")

-> class="클래스명" 속성을 갖는 모든 요소를 찾아 리스트 형태로 반환

 

 

 

 

요소의 내용 수정

-innerHTML 속성

: HTML 형식으로 요소 내용을 다룰 떄 사용

-> DOM변수 = document.getElementById("아이디명");

-> 변수 = DOM변수.innerHTML 또는 DOM.innerHTML="값"

 

-textContent 속성

: HTML 요소와 속성을 제외하고 텍스트 내용만 가져오는 경우

-> 변수 = DOM변수.textContent

: HTML 요소를 일반 텍스트로 취급해서 요소 내용을 지정할 떄

-> DOM변수.textContent = "값"

 

예제)

 

 

 

 

 

요소의 속성 수정

: HTML 요소의 속성을 그대로 사용해서 새로운 값을 할당

-> document.getElementById("아이디명").속성=값

 

 

 

 

요소의 스타일 수정

: CSS 스타일의 동적인 수정도 가능

-> document.getElementById("아이디명").style.CSS속성명 = 값

-> CSS 속성명이 하이픈('-')을 포함하고 있는 경우

*하이픈을 없애고 낙타체로 표기

ex) background-color -> backgroundColor

 

예제)

 

 

 

 

기존 HTML 문서에 새로운 요소의 삽입

: 텍스트 내용을 갖는 새 요소의 삽입 과정

-> 삽입하려는 요소의 DOM 객체 생성

 

-> 삽입하려는 요소의 텍스트 내용 완성

 

-> 새 요소가 삽입될 부모 요소를 찾아 자식 요소로 연결

 

 

: 속성이 있는 새 요소의 삽입 과정

-> 삽입하려는 요소의 DOM 객체 생성

 

-> [삽입하려는 요소의 속성과 속성값 추가 ]+

 

-> 새 요소가 삽입될 부모 요소를 찾아 자식 요소로 연결

 

 

 

예제1)

 

예제2)

 

 

 

 

기존 HTML 요소의 삭제

: 삭제 과정

-DOM 구조에서 삭제하려는 노드의 부모 노드를 찾은 후, removeChild() 메서드 적용

부모요소.removeChild(삭제하려는 요소);

 

예제)