📝 DOM(Document Object Model)
웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것
-> 문서 내 특정 요소에 접근하는 방법을 제공
📌 DOM을 이용한 HTML 요소 접근하기(해당 요소 객체 가져오기)
💡 id로 접근하기
document.getElementById("id속성값");✏️ 코드로 살펴보기
- html
<button onclick="accessId()">클릭할 때마다 배경 색 변경</button>
<div id="div1" class="area"></div>- js
// id로 접근하기
function accessId(){
const div1 = document.getElementById("div1");
// 접근한 요소의 배경색 얻어오기
const bgColor = div1.style.backgroundColor;
// *** 자바스크립트는 문자열 비교 시에도 비교 연산자를 사용한다!! ***
if(bgColor == "red"){
// div1의 배경색을 yellow로 변경
div1.style.backgroundColor = "yellow";
} else{
// div1의 배경색을 red로 변경
div1.style.backgroundColor = "red";
}
}✏️ 출력 화면
-> 버튼을 누를 때마다 노란색과 빨간색으로 번갈아 가며 배경 색이 변경되는 것을 볼 수 있다.
💡 name으로 접근하기
document.getElementsByName("name속성값");
<!-- 복수 형태(Elements)로 작성 -->✏️ 코드로 살펴보기
- html
<h3>name으로 접근하기</h3>
<table>
<tr>
<td>
<input type="checkbox" name="hobby" id="game" value="게임">
<label for="game">게임</label>
</td>
<td>
<input type="checkbox" name="hobby" id="music" value="음악감상">
<label for="music">음악감상</label>
</td>
<td>
<input type="checkbox" name="hobby" id="movie" value="영화감상">
<label for="movie">영화감상</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="hobby" id="coding" value="코딩">
<label for="coding">코딩</label>
</td>
<td>
<input type="checkbox" name="hobby" id="exercise" value="운동">
<label for="exercise">운동</label>
</td>
<td>
<input type="checkbox" name="hobby" id="book" value="독서">
<label for="book">독서</label>
</td>
</tr>
</table>
<div class="area" id="name-div"></div>
<button onclick="accessName()">출력하기</button>- js
// name으로 접근하기
function accessName(){
const hobbyList = document.getElementsByName("hobby");
let str = "";
let count = 0;
for(let i=0; i<hobbyList.length; i++){
// * radio/checkbox 전용 속성 *
// .checked : 해당 요소가 체크되어 있으면 true, 아니면 false 반환
if(hobbyList[i].checked){ // 현재 요소가 체크되어 있으면
// str 변수에 value 누적
str += hobbyList[i].value + " ";
count++; // 개수 증가
}
}
// #name-div에 출력
document.getElementById("name-div").innerText = str
document.getElementById("name-div").innerHTML += "<br>선택된 개수 : " + count;
}✏️ 출력 화면
-> 선택된 체크 박스 속 value 값과 선택된 개수가 출력된다.
💡 class로 접근하기
document.getElementsByClassName("class속성값");
<!-- 같은 class는 여러 요소가 가질 수 있으므로 복수(Elements)로 작성 -->✏️ 코드로 살펴보기
- html
<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>
<button onclick="accessClass()">배경 색 변경하기</button>- js
// class로 접근하기
function accessClass(){
// 요소를 여러 개 접근하는 경우 [배열] 형태로 반환됨
const arr = document.getElementsByClassName("div2");
// 인덱스를 이용해서 요소 하나씩 접근
arr[0].style.backgroundColor = "pink";
arr[0].innerHTML = "첫 번째 요소";
arr[1].style.backgroundColor = "tomato";
arr[1].innerHTML = "두 번째 요소";
arr[2].style.backgroundColor = "skyblue";
arr[2].innerHTML = "세 번째 요소";
}✏️ 출력 화면
-> 버튼을 누르면 배경 색과 문자가 채워진다.
💡 tag로 접근하기
document.getElementsByTagName("태그명");✏️ 코드로 살펴보기
- html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button onclick="accessTagName()">배경 색 변경</button>
<h1>input 태그의 값(value) 얻어오기/변경하기</h1>
<input type="text" id="input-test">
<button onclick="inputTest()">입력</button>- js
// 태그명으로 접근하기
function accessTagName(){
// 문서 내 모든 li태그 접근(배열 반환)
const arr = document.getElementsByTagName("li");
// 반복문(Java랑 비슷)
for(let i=0; i<arr.length; i++){
const num = arr[i].innerText; // 요소에 작성된 내용(숫자) 얻어오기
arr[i].style.backgroundColor = "rgb(130, 220, " + (50 * num) + ")";
}
}
// input 태그의 값(value) 얻어오기/변경하기
function inputTest(){
// input 요소 접근하기
const input = document.getElementById("input-test");
// ** innerText/innerHTML은
// 요소의 내용 (시작 태그, 종료 태그 사이에 작성된 내용)을
// 얻어 오거나, 변경할 때만 사용 가능
// ** input은 [value]를 이용해서 값을 얻어 오거나, 변경할 수 있음
console.log(input.value)
// input에 작성된 값 변경하기
input.value = ""; // 빈 문자열 == value 지우기
// input에 초점 맞추기 -> focus()
input.focus();
}✏️ 출력 화면
-> 반복문이 돌면서 그라데이션 형태로 배경 색이 칠해지는 모습을 볼 수 있다.
-> 입력 창에 문자를 입력하고 '입력' 버튼을 누를 때마다
-> 콘솔 창에 입력한 문자가 출력된다. 또한 input.focus(); 구문으로 인해 입력 창에 계속해서 커서가 놓여 있는 모습이 보인다.
💡 CSS 선택자로 접근하기
1) document.querySelector("CSS 선택자");
-> 선택된 요소가 여러 개일 경우 첫 번째 요소만 접근하기
2) document.querySelectorAll("CSS 선택자");
-> 선택된 요소 모두 접근
✏️ 코드로 살펴보기
- html
<div id="css-div">
<div class="area">test1</div>
<div class="area">test2</div>
</div>
<button onclick="accessCss()">확인하기</button>- js
// css 선택자로 접근하기
function accessCss(){
// querySelector() : 요소 1개 선택 시 사용
// (여러 요소가 선택되면 첫 번째 요소만 선택)
// 1개만 있는 요소 선택
document.querySelector("#css-div").style.border = "3px solid red";
// 여러 개 있는 요소 선택(첫 번째 요소 선택 확인)
document.querySelector("#css-div > div").style.fontSize = "30px";
// querySelectorAll() : 모든 요소 선택 시 사용
const arr = document.querySelectorAll("#css-div > div");
// 배경 색을 원하는 색상으로 바꾸고 실행해 보기
for(let i=0; i<arr.length; i++){
arr[i].style.backgroundColor = "gold";
}
}✏️ 출력 화면
-> 버튼을 눌렀을 때 배경 색과 테두리에 속성이 적용되는 모습이다.
풀스택 개발자 기록집 📁