1. dom객체란?
Document Object Model : 문서 객체 모델
HTML을 객체로 다루기 위한 내장 객체
2. 주요 속성
| 속성 | 설명 |
|---|---|
| document.write('출력 내용') | HTML에 출력하는 함수 |
| document.querySelector('선택자') | HTML에 지정한 선택자를 JS 객체로 반환하는 함수 |
| document.querySelectorAll('선택자') | HTML에 지정한 선택자 모두를 JS 객체를 배열로 반환하는 함수 |
| dom객체.innerHTML | 마크업 내 html을 호출하는 속성 ex) div, span, button, table |
| dom객체.value | value 값을 JS 객체로 가져옴 ex) input, select, textarea etc. |
| dom객체.style | 마크업 내 style CSS 요소 대입 |
| dom객체.style.css속성명 | 마크업 내 styel CSS 요소 추가 |
| dom객체.classList | 마크업 내 적용된 class들을 반환 |
| dom객체.classList.add('class명') dom객체.classList.remove('class명') | |
| dom객체.classList.toggle('class명') | 마크업 내 지정 클래서가 없으면 추가, 있으면 삭제 |
| dom객체.classList.contains('class명') | 마크업 내 지정 클래스가 있는지 확인 > true/flase |
| dom객체.src | |
| dom객체.remove | |
| 마크업.files[0] | 첨부파일의 첫번째 파일 객체를 가져옴<input type='files'>[ + 파일객체를 URL 주소로 만들어주는 함수 ] ex) URL.createObjectURL(마크업.files[0]) |
3.예제
1) 요소 내용 변경하기
id가 'title'인 <h1> 요소의 내용을 'DOM 조작 성공!'으로 변경하시오.
(1) 목표 요소 : #title
(2) 사용할 내장 속성/메소드: .innerHTML
(3) 처리할 내용 : 'DOM 조작 성공!' 텍스트로 교체
<h1 id="title">이전 제목</h1>console.log(document.querySelector('#title').innerHTML)
document.querySelector('#title').innerHTML = 'DOM 조작 성공!';2) 사용자 입력값 가져와서 표시하기
id가 'usernameInput'인 <input>에 이름을 입력하고
'확인' 버튼(id: 'submitBtn')을 클릭하면,
id가 'greeting'인 <p> 태그에 "안녕하세요, [입력된이름]님!"이라고 표시하시오.
(1) 목표 요소 : #usernameInput, #submitBtn, #greeting
(2) 사용할 내장 속성/메소드: .value, .innerHTML
(3) 처리할 내용 : 버튼 클릭 시 input의 value를 읽어와 p 태그에 삽입
<input type="text" id="usernameInput" placeholder="이름을 입력하세요">
<button id="submitBtn" onclick="func()">확인</button>
<p id="greeting">결과가 여기에 표시됩니다.</p>function func() {
console.log('func exe');
const userName = document.querySelector('#usernameInput').value;
console.log(userName);
document.querySelector('#greeting').innerHTML = `안녕하세요. ${userName} 님!`;
};3) 요소 스타일 동적으로 변경하기
'스타일 변경' 버튼(id: 'styleBtn')을 클릭하면,
id가 'colorBox'인
의 배경색을 'skyblue'로, 글자색을 'white'로 변경하시오.
(1) 목표 요소 : #styleBtn, #colorBox
(2) 사용할 내장 속성/메소드: .style
(3) 처리할 내용 : 버튼 클릭 시 div의 배경색과 글자색 스타일 변경
(1) 목표 요소 : #styleBtn, #colorBox
(2) 사용할 내장 속성/메소드: .style
(3) 처리할 내용 : 버튼 클릭 시 div의 배경색과 글자색 스타일 변경
<button id="styleBtn" onclick="func()">스타일 변경</button>
<div id="colorBox">이 박스의 스타일이 바뀝니다.</div>function func() {
console.log('func4 exe');
const colorBox = document.querySelector('#colorBox');
colorBox.style = "color : white; background : skyblue";
};4) select 에서 선택한 option값 console 출력하기
(1) 목표 요소 : #foodSelect
(2) 사용할 내장 속성/메소드 : .value
(3) 처리할 내용 : select 요소의 값이 변경될 때마다 선택된 option의 value를 콘솔에 출력
<select id="foodSelect" onchange="func()">
<option value="">-- 음식을 선택하세요 --</option>
<option value="pizza">피자</option>
<option value="chicken">치킨</option>
<option value="sushi">초밥</option>
</select>function func() {
console.log('func exe');
const foodSelect = document.querySelector('#foodSelect').value;
console.log(foodSelect);
};
2025.05.~K디지털_풀스택 수업 수강중