Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

JIHYUN JEONG

[자바스크립트/Javascript] DOM(Document Object Model) 이란 ? (용어 정의) 본문

Information Technology/Javascript

[자바스크립트/Javascript] DOM(Document Object Model) 이란 ? (용어 정의)

StopHyun 2018. 1. 16. 13:11



자바스크립트로 문서 객체(DOM)에 대해서 배워 보도록 하겠습니다.


DOM은 Document Object Model의 약자 입니다. document 객체에 소속된 DOM 매서드를 통해 특정 부분를 선택 하거나 관리 및 변경(내용 및 속성) 할 수 있습니다.



 DOM 매서드

 -  document.getElementById(ID명) : ID 사용해서 문서 요소 선택

 - document.querySelector(CSS선택자) : CSS 선택자 사용 (IE 8이상) 


id를 엄격하게 구분 합니다. id명 정의시 주의가 필요합니다.



1. 문서 객체 한개를 관리 및 변경 


1-1. ID를 사용하는 방법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM EXAMPLE 01</title>
</head>
<body>
<h1 id="title">here would be changed</h1>
 
<script>
    let tile = document.getElementById('title');
 
    title.style.color = 'red';
    title.style.background = 'white';
    title.innerHTML = 'changed';
 
</script>
</body>
</html>





1-2. CSS 사용방식



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS selector</title>
</head>
<body>
<ul>
    <li>hello</li>
    <li>world</li>
    <li>javascript</li>
    <li>dom</li>
 
</ul>
<script>
    let li = document.querySelector('li');
    li.style.color = 'blue';
    li.style.background = 'green';
    li.innerHTML = 'changed';
</script>
</body>
</html>



CSS 선택자로 사용하는 방식은 가장 첫 번째 요소만 관리 및 수정 됩니다.





성실함의 잣대로 스스로를 평가하라, 그리고 관대함의 잣대로 남들을 평가하라.

Judge thyself with the judgment of sincerity, and thou will judge others with the judgment of charity.


존 미첼 메이슨

John Mitchell Mason

Comments