1. DOM이란?
DOM은 문서 객체 모델(Document Object Model)의 줄임말로서
자바스크립트를 이용하여 웹문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 말한다.
말이 어렵지만 CSS처럼 selector를 통해 태그에 직접 접근하여 html 요소를 조작하는 방법이다.
2. DOM 요소에 접근하고 속성 가져오기
DOM은 웹 문서를 하나의 객체로 정의하여, 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체로, 모든 요소를 객체로 인식하고 처리한다.
id, class, tag 속성을 활용하여 DOM 객체에 접근
DOM 요소 접근에 필요한 html 및 css
table {
border: 1px solid black;
border-collapse: collapse;
margin: 30px 0;
}
th, td {
border : 1px solid black;
padding : 10px;
text-align: center;
}
td.on {
background-color: #455ba8;
color: white;
}
<ul>
<li id="myli1" class="group">요소1</li>
<li id="myli2">요소2</li>
<li id="myli3" class="group">요소3</li>
<li id="myli4">요소4</li>
<li id="myli5" class="group">요소5</li>
</ul>
<input type="button" value="id" onclick="test1();">
<input type="button" value="tag name" onclick="test2();">
<input type="button" value="class name" onclick="test3();">
2.1. getElementById('id명) / querySelector('#id명')
: id 속성을 통해 요소에 접근하여 변수에 dom 객체를 저장한다.
- document.getElementById('id명');
DOM 요소들이 HTMLCollection 객체로 저장(유사배열)
=> HTML 요소('p'나 'a' 등) 만 저장된다.
- document.querySelector('#id명');
DOM 트리요소들이 NodeList(유사배열) 또는 Node형태로 저장
<script>
function test1() {
var li = document.getElementById("myli1");
var li = document.querySelector("#myli1");
li.style.color = "#fff";
li.style.backgroundColor = "magenta";
}
...
| 버튼 클릭 전 | id 버튼 클릭 후 |
|---|
 |  |
| id가 myli1인 태그의 스타일 속성을 변경 |
: 태그명을 통해 요소에 접근
- document.getElementsByTagName('태그명')
- document.querySelectorAll('태그명')
<script>
function test2(){
var liArr = document.getElementsByTagName("li"); // HTMLCollection (유사배열)
var liArr = document.querySelectorAll("li"); // NodeList (유사배열)
var blue = 50;
for(var i=0; i<liArr.length; i++){
liArr[i].style.color = "rgb(130,220,"+blue+")";
liArr[i].style.backgroundColor = "magenta";
blue+=50;
}
...
| 버튼 클릭 전 | tag name 버튼 클릭 후 |
|---|
|  |
| 반복문으로 태그가 li인 요소들의 스타일을 변경 |
2.3. getElementsByClassName('class명') / querySelectorAll(".class명")
: 클래스명을 통해 요소에 접근
- document.getElementsByClassName('class명');
- document.querySelectorAll('.class명');
<script>
function test3(){
var groups = document.getElementsByClassName("group");
var groups = document.querySelectorAll(".group");
for( var li of groups ){
if(li.style.backgroundColor == "magenta"){
li.style.backgroundColor= "springgreen";
} else {i.style.backgroundColor="magenta";
}
}
...
| 버튼 클릭 전 | class name 버튼 클릭 후 |
|---|
|  |
| class명이 group인 태그의 스타일 요소를 조건식을 통해 변경 |
2.4. 웹 요소의 내용을 수정하는 innterText, innerHTML 프로퍼티
- innerText : 태그의 텍스트만 가져오는 속성
- innerHTML : HTML태그까지 반영하여 표시(텍스트, 자식태그들)
HTML
<button type="button" onclick="test3();">innerHTML</button>
<button type="button" onclick="test4();">innerText</button>
<button type="button" onclick="test5();">outerHTML</button>
<div class="wrapper"></div>
innerHTML 자바스크립트
function test3(){
var str = prompt(".wrapper 태그에 들어갈 내용을 입력해보세요");
var wrapper = document.querySelector(".wrapper");
wrapper.innerHTML = '<em>' +str+ '</em>'; // setter
console.log(wrapper.innerHTML); // getter
}
- getter : html이 포함된 content를 반환.
- setter : 주어진 문자열을 html로 변환하여 처리
-----------------------------------------------------------
innerText 자바스크립트
function test4() {
var str = prompt('입력아무거나 하세염');
var wrapper = document.querySelector(".wrapper");
wrapper.innerText = '<em>' +str+ '</em>'; // setter함수
console.log(wrapper.innerText);
}
- getter : html태그는 무시하고 텍스트만 가져온다
- setter : html태그는 단순 문자열로 처리된다.
| innerHTML prompt | innerHTML console |
|---|
 |  |
| innerText prompt | innerText console |
|---|
 |  |
