[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기
1> 문서 객체 모델 (DOM)
2> DOM 요소에 접근, 속성 가져오기
3 DOM 에서 이벤트 처리하기
4 DOM 에서 노드 추가, 삭제하기
1 문서 객체 모델 (DOM)
문서 객체 모델이란?
문서 객체 모델이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다.
DOM 은 웹 문서를 하나의 객체로 정의하고, 모든 요소도 각각 객체로 정의한다.
DOM 트리
DOM 은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하는데, 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.
부모와 자식 구조로 표시하는 것을 DOM 트리라고 하며, 트리에서 가지가 갈라져나간 항목을 노드, DOM 트리의 시작 부분을 루트 노드라고 한다. 부모 노드에는 자식 노드가 있고, 부모 노드가 같은 형제 노드도 있다.
1 모든 HTML 태그는 요소(element) 노드
2 HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
3 HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드
4 주석은 주석(comment) 노드
(ex. HTML 요소 관계 알아보기)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM Tree</title>
</head>
<body>
<h1>Do it!</h1>
<img src="images.jpg" alt="이미지">
</body>
</html>
「 ¯¯ ¯¯ ¯¯ ㅣ |
root element html | |
¯¯ ¯¯ ¯¯ ㄱ | |
|||
「 ¯¯ ¯¯ ¯¯ ㅣ |
| element head | |
| attribute lang="ko" |
| element body | |
¯¯ ¯¯ ¯¯ ㄱ | |
|
| | element meta | |
| element title | |
| element h1 | |
| element img | |
¯¯ ¯¯ ¯¯ ㄱ | |
|
| | attribute charset="UTF-8" |
| text DOM Tree |
| text Do it! |
| attribute src="image.jpg" |
| attribute alt="이미지" |
DOM 트리를 그릴 수 있어야 자바스크립트를 사용해서 객체에 접근해서 원하는 부분을 수정할 수 있다.
2 DOM 요소에 접근, 속성 가져오기
id 선택자로 접근하는 getElementById( ) 메서드
기본형
요소명.getElementById("id명")
getElementById( ) 메서드를 사용하면 특정한 id 가 포함된 DOM 요소에 접근할 수 있다.
class값으로 접근하는 getElementsByClassName( ) 메서드
기본형
요소명.getElementsByClassName("class명")
getElementsByClassName( ) 메서드를 사용하면 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근할 수 있다. 반환하는 요소가 2개 이상일 수 있으므로 Element 에 s 를 붙인다.
클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장되어 배열과 비슷하고 배열처럼 사용할 수 있지만 배열은 아니다.
이처럼 반환값은 HTMLCollection 객체로 HTML 요소('p' 나 'a' 같은 형태)만 저장된다.
태그 이름으로 접근하는 getElementsByTagName( ) 메서드
기본형
요소명.getElementsByTagName("태그명")
getElementByTagName( ) 메서드를 사용하면 class 나 id 를 지정하지 않은 DOM 요소에 접근할 수 있다. 반환하는 요소가 2개 이상일 수 있으므로 Element 에 s 를 붙인다.
반환값은 HTMLCollection 객체로 HTML 요소('p' 나 'a' 같은 형태)만 저장된다.
다양한 방법으로 접근하는 querySelector( ), querySelectorAll( ) 메서드
기본형
노드.querySelector("선택자")
노드.querySelectorAll("선택자 또는 태그")
DOM 트리의 텍스트, 속성 노드까지 제어하려면 querySelector( ), querySelectorAll( ) 메서드를 사용해야 한다.
querySelecor( ) 메서드 id 선택자처럼 반환값이 하나, id 이름 앞 해시 기호(#),
class 이름으로 접근 시 그중 첫 번째 요소만 반환
querySelecorAll( ) 메서드 class 선택자나 태그 이름처럼 반환값이 여러 개, class 이름 앞 마침표(.)
위 메서드들의 반환값은 노드거나 노드 리스트이다. 노드 리스트는 노드를 여러 개 저장한 것으로 배열과 비슷하다.
웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티
기본형
요소명.innerText = 내용
요소명.innerHTML = 내용
innerText 프로퍼티는 텍스트 내용을 표시하고, innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시한다.
(ex. innerText, innerHTML 프로퍼티 사용하기)
...
<button onclick="inntext()">innerText로 표시하기</button>
<button onclick="innhtml()">innerHTML로 표시하기</button>
<h1>현재 시각 : </h1>
<div id="current"></div>
<script>
var now = new Date();
function inntext() {
document.getElementById("current").innerText = now;
}
function innhtml() {
document.getElementById("current".innerHTML = "<em>" + now + "</em>";
}
</script>
...
속성을 가져오거나 수정하는 getAttribute( ), setAttribute( ) 메서드
기본형
getAttribute("속성명")
기본형
setAttribute("속성명", "값")
getAttribute( ) 메서드를 사용하여 속성에 접근하여 setAttribute( ) 메서드를 사용하여 접근한 속성값을 바꾼다.
(ex. 이미지 속성 가져오기)
...
<div id="prod-pic">
<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup"
width="200" height="200" onclick="displaySrc()">
...
</div>
<script>
function displaySrc() {
var cup = document.querySelector("#cup"); // id="cup" 인 요소에 접근
alert("이미지 소스 : " + cup.getAttribute("src")); // cup 속성을 알림창에 표시
}
</script>
...
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| [기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기 (0) | 2022.08.27 |
|---|---|
| [기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기 (0) | 2022.08.25 |
| [정리] 2 | 객체, 자바스크립트의 내장 객체 정리 (0) | 2022.08.23 |
| [기본 개념] 2 | (2.2) 브라우저와 관련된 객체 (1) | 2022.08.23 |
| [기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체 (0) | 2022.08.17 |