HTML DOM( Document Object Model)
웹 페이지를 로드할 때 브라우저는 DOM(Document Object Model) 모델을 만든다.
HTML DOM의 경우 객체의 트리형식으로 만들어져 있다.
위의 그림을 차근차근 설명하면
처음에 문서에서 시작하여 시작 요소 <html>
하위 요소에는 <head>와 <body>가 존재하며
<head> 하위에는 <title>이 이것의 하위 텍스트는 "Mytitle"이 존재한다.
마찬가지로 <body>의 하위에는 <a>와 <h1>이 하위요소로 있으며
<a>의 경우 속성이 "href"가 된다.
DOM 사용하는 이유?
객체 모델(DOM)을 통해 JavaScript의 필요한 기능을 얻을 수 있다.
자바스크립트 페이지 안에서 HTML 요소를 바꿀 수 있다.
자바스크립트 페이지 안에서 HTML 속성을 바꿀 수 있다.
자바스크립트 페이지 안에서 CSS 스타일을 바꿀 수 있다.
자바스크립트 페이지 안에서 HTML 속성과 요소를 제거할 수 있다.
자바스크립트 페이지 안에서 HTML 속성과 요소를 추가할 수 있다.
자바스크립트 페이지 안에서 HTML 이벤트를 진행시키거나 만들 수 있다.
DOM 프로그래밍 인터페이스
위의 코드를 보면 태그 <p> id="demo"를 document.getElementById("demo").innerHTML을 통해
<p> 태그 부분에 "Hello World!"가 오게끔 설계하였다.
JavaScript HTML Elements
자바스크립트에서는 여러 가지 HTML Elements이 존재한다.
기본적으로 Id, Tag Name, Class Name, CSS Selectors가 된다.
ID의 경우 DOM 프로그래밍 인터페이스에 있는 그림이 된다.
Finding HTML Elements by Tag Name
위의 코드에 대해 설명을 하면 element에 document.getElemenstByTagName("p")를 통해 <p> 태그를 요소로 받는다.
<script> 부분에서 element[0]의 경우 <p> 태그의 첫 번째 Finding HTML Elements by Tag Name가 된다.
그렇기 때문에 실행 후 세 번째 줄 The Text in first ~~ 뒤 Finding HTML~~가 오게 된다.
Finding HTML Elements by Class Name
태그와 마찬가지로 Class Name의 경우 배열 형태로 지정하여 값을 집어넣는다.
getElementsByClassName("intro")를 통해 intro 클래스를 사용한다.
x[0]은 Hello World! 이기 때문에 뒤의 마지막 문장이 Hello World!로 끝마치게 된다.
Finding HTML Elements by CSS Selectors
CSS Selectors의 경우에는 getElement~가 아닌 querySelectorAll()을 사용한다.
빈칸 안에는 위의 예시처럼 p.intro 가 올 수도 있고 p만 올 수도 있다.
p.intro가 올경우 위의 예시처럼 Hello World! 가 마지막에 오게 된다.
반면에 p가 올 경우에는 Finding HTML Elements by Query Selector가 온다.
(x[0] 일 때의 기준인 설명이다.)
Changing HTML
자바스크립트에서 HTML의 Content를 바꿀 수 있다.
위의 코드에 대해 설명을 하면
원래 <p id="p1"> 태그에는 Hello World!가 나와야 하지만 결과를 보면 New text!가 나온 것을 확인할 수 있다.
이것은 <script> 부분에서 document.getElementByID("p1").innerHTML = "New text!"를 통해 바꾸었기 때문이다.
자바스크립트에서 Attribute의 value를 바꿀 수 있다.
위의 코드에서 원래 사진은 smiley.gif 여야 하지만 실제로 출력된 사진은 landscape.jpg이다.
이렇게 속성까지도 변경이 가능하다.
댓글