09 DOM
- document object(문서 객체): html에서의 요소(element)
- Document Objects Model(문서 객체 모델): 문서 객체를 조합해 만든 전체적 형태
09-01 DOMContentLoaded
DOMContentLoaded: HTML 문서가 로드되고 스크립트가 다운로드된 후 발생(이미지, 비동기 스크립트 등이 로드 전).
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document Objects Model</title>
<script>
const makeH1Tag = (text) => "<h1>" + text + "</h1>";
document.body.innerHTML += makeH1Tag(
"1번째 태그: 로드 전 실행으로 오류 발생"
);
</script>
<!-- 위 script TypeError 이후 작동 정지하기에 새로 script 태그 생성 -->
<script>
// document.addEventListener(event, () => {}): 지정 event 발생 후 함수 실행
// load: 페이지의 전체 모든 것이 로드 되고 발생.
// 구버전은 window가 document라는 것 같기도 하고 책이 틀린 거 같기도 하고...
window.addEventListener("load", function () {
document.body.innerHTML += makeH1Tag(
"2번째 태그: 전부 load 후 실행으로 6번으로 생성"
);
});
// 위 코드와 같다고 함
window.onload = function () {
document.body.innerHTML += makeH1Tag(
"3번째 태그: 전부 load 후 실행으로 7번으로 생성"
);
};
// DOMContentLoaded: HTML 문서가 로드되고 스크립트가 다운로드된 후 발생(이미지, 비동기 스크립트 등이 로드 전).
document.addEventListener("DOMContentLoaded", () => {
document.body.innerHTML += makeH1Tag(
"4번째 태그: 비동기 실행으로 5번으로 생성"
);
});
</script>
</head>
<body>
<script>
document.body.innerHTML += makeH1Tag("5번째 태그: 1번으로 생성");
</script>
<h1>6번째 태그: 2번으로 생성</h1>
<script>
document.body.innerHTML += makeH1Tag("7번째 태그: 3번으로 생성");
</script>
<h1>8번째 태그: 4번으로 생성</h1>
</body>
</html>09-02 문서 객체 조작
-
객체 접근 방법
getElementsByTagName(): 태그로 선택getElementsByClassName(): 클래스로 선택getElementById(): 아이디로 선택querySelector(css 선택자),querySelectorAll(css선택자): css 선택자로 선택
-
객체 조작 메서드 테이블(ChatGPT 답변)
| 카테고리 | 메서드 | 설명 |
|---|---|---|
| 요소 선택 | document.getElementById(id) | 주어진 ID를 가진 요소를 선택합니다. |
document.getElementsByClassName(class) | 주어진 클래스 이름을 가진 모든 요소를 선택합니다. | |
document.getElementsByTagName(tag) | 주어진 태그 이름을 가진 모든 요소를 선택합니다. | |
document.querySelector(selector) | CSS 선택자를 사용하여 첫 번째 요소를 선택합니다. | |
document.querySelectorAll(selector) | CSS 선택자를 사용하여 모든 일치하는 요소를 NodeList로 반환합니다. | |
| 속성 조작 | element.setAttribute(name, value) | 요소의 속성을 설정합니다. |
element.getAttribute(name) | 요소의 지정된 속성 값을 가져옵니다. | |
element.removeAttribute(name) | 요소에서 지정된 속성을 제거합니다. | |
element.hasAttribute(name) | 요소가 지정된 속성을 가지고 있는지 확인합니다. | |
| 내용 조작 | element.innerHTML | 요소 내부의 HTML 콘텐츠를 가져오거나 설정합니다. |
element.innerText | 요소 내부의 텍스트 콘텐츠를 가져오거나 설정합니다. | |
element.textContent | 요소 내부의 텍스트 콘텐츠를 가져오거나 설정합니다. innerText와 달리 스타일의 영향을 받지 않습니다. | |
element.value | 폼 요소에서 입력된 값을 가져오거나 설정합니다. (예: <input>, <textarea>) | |
| 스타일 및 클래스 조작 | element.style | 요소의 인라인 스타일을 가져오거나 설정합니다. |
element.classList.add(class) | 요소에 클래스 이름을 추가합니다. | |
element.classList.remove(class) | 요소에서 클래스 이름을 제거합니다. | |
element.classList.toggle(class) | 요소에서 클래스 이름을 추가하거나 제거합니다. (클래스가 존재하면 제거, 없으면 추가) | |
| DOM 트리 조작 | element.appendChild(node) | 요소의 마지막 자식으로 새로운 노드를 추가합니다. |
element.insertBefore(newNode, refNode) | 지정된 참조 노드 앞에 새로운 노드를 삽입합니다. | |
element.removeChild(node) | 요소에서 자식 노드를 제거합니다. | |
element.replaceChild(newNode, oldNode) | 기존 자식 노드를 새로운 노드로 교체합니다. | |
| 애니메이션 및 효과 | element.setInterval() | 지정된 시간 간격으로 함수를 반복 실행합니다. |
element.setTimeout() | 지정된 시간 후에 함수를 한 번 실행합니다. | |
| 탐색 | element.parentNode | 현재 요소의 부모 요소를 가져옵니다. |
element.childNodes | 현재 요소의 모든 자식 노드를 NodeList로 반환합니다. | |
element.firstChild | 현재 요소의 첫 번째 자식 노드를 가져옵니다. | |
element.lastChild | 현재 요소의 마지막 자식 노드를 가져옵니다. | |
element.nextSibling | 현재 요소의 다음 형제 노드를 가져옵니다. | |
element.previousSibling | 현재 요소의 이전 형제 노드를 가져옵니다. | |
| DOM 트리 탐색 | document.createElement(tagName) | 새로운 HTML 요소를 생성합니다. |
document.createTextNode(text) | 새로운 텍스트 노드를 생성합니다. | |
element.cloneNode(deep) | 요소의 복제본을 생성합니다. (깊은 복제: 자식 요소까지 복제) | |
| 폼 요소 조작 | form.submit() | 폼을 제출합니다. |
form.reset() | 폼을 초기화합니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<title>DOM control</title>
<script>
// 아래 코드 2줄은 태그 생성 전이기에 [html, head, titile, script만 반환]
console.log(document.all);
console.log(document.getElementsByTagName("*"));
// documnet의 속성으로 바로 접근 가능한 태그들
console.log(document.head, document.title, document.scripts, document.body);
</script>
</head>
<body>
<h1>이것은 무엇일까요</h1>
<div id="first-div" class="first">
<span id="first-span" class="first">first</span>
<span id="second-span" class="second">second</span>
<div id="second-div" class="second">
<span class="space first">space first</span>
<span class="space second">space second</span>
</div>
</div>
<div id="third-div" class="third">
<span id="third-span" class="third">third</span>
<span id="forth-span" class="forth">forth</span>
</div>
</body>
<script>
// 요소 접근
// 현재 문서의 접근 가능한 html 태그 전체 반환
console.log(document.all);
// 문서 객체 선택법
// 1. 태그로 선택: getElementsByTagName()
// 2. 클래스로 선택: getElementsByClassName()
// 3, 아이디로 선택: getElementById()
// 4. css 선택자로 선택: querySelector(css 선택자), querySelectorAll(css선택자)
console.log(document.getElementsByTagName("*")); // *: 전체
console.log(document.getElementsByClassName("first"));
console.log(document.getElementById("first-span"));
console.log(document.querySelectorAll("div"));
// .: 클래스, #: id, >: 자식 ` (space)`: 자손 전체
console.log(document.querySelectorAll(".first"));
console.log(document.querySelector(".first"));
console.log(document.querySelectorAll(".space"));
// `<tag class"class1 class2">`: 띄어쓰기로 구분되는 여러 클래스 이름을 보유.
console.log(document.querySelectorAll(".space.first"));
console.log(document.querySelector("#first-span"));
console.log(document.querySelectorAll("#first-div span"));
console.log(document.querySelectorAll("#first-div>span"));
// 요소 다루기
// innerHTML: 문자열이 HTML 태그로 인식 "<br>"
// innerText: 문자열이 단순 Text로 인식 "<br>"
// style.[attr]: 스타일의 속성 접근(이름은 파스칼 케이스).
let el1 = document.querySelector(".space.first");
el1.innerHTML = "space<br /> first<br />";
let el2 = document.querySelector(".space.second");
el2.innerText = "space <br /> second";
el2.style.color = "green";
document.querySelectorAll(".second").forEach((el) => {
el.style.backgroundColor = "#ccc"
el.innerHTML += "<br /><br />forEach<br /><br />"
}
);
// setAttribute: 속성 설정
// getAttribute: 속성 반환
// createElement: 요소 생성
document.querySelectorAll(".first").forEach((el) => {
el.setAttribute("style", "font-size: 28px")
let elId = el.getAttribute("id")
let newContent1 = document.createElement("span");
newContent1.innerHTML = "id: " + elId + "<br />";
el.insertBefore(newContent1, el.firstChild);
let elClass = el.getAttribute("class")
let newContent2 = document.createElement("span");
newContent2.innerHTML = "<br />class: " + elClass + "<br />";
el.appendChild(newContent2)
}
);
</script>
</html>10 이벤트
- 이벤트(event): 마우스를 위에 올리거나 클릭 등의 특정 행동 변화를 의미
- 이벤트 리스너(event listener), 이벤트 핸들러(event handler): 이벤트가 발생할 때 실행하는 함수
10-01 html의 event 속성
- event 속성(ChatGPT 응답)
| 이벤트 속성 | 설명 |
|---|---|
onclick | 사용자가 요소를 클릭할 때 실행되는 이벤트 처리기 |
ondblclick | 사용자가 요소를 더블 클릭할 때 실행되는 이벤트 처리기 |
onmousedown | 사용자가 마우스를 눌렀을 때 실행되는 이벤트 처리기 |
onmouseup | 사용자가 마우스 버튼을 놓았을 때 실행되는 이벤트 처리기 |
onmousemove | 마우스가 요소 위를 움직일 때 실행되는 이벤트 처리기 |
onmouseover | 마우스가 요소 위에 올려졌을 때 실행되는 이벤트 처리기 |
onmouseout | 마우스가 요소를 벗어날 때 실행되는 이벤트 처리기 |
onkeydown | 사용자가 키보드의 키를 누를 때 실행되는 이벤트 처리기 |
onkeyup | 사용자가 키보드의 키를 뗄 때 실행되는 이벤트 처리기 |
onkeypress | 사용자가 키보드의 키를 눌렀을 때 발생하는 키 입력 이벤트 처리기 (현재는 deprecated) |
onfocus | 요소가 포커스를 받았을 때 실행되는 이벤트 처리기 |
onblur | 요소에서 포커스가 벗어났을 때 실행되는 이벤트 처리기 |
onchange | 요소의 값이 변경될 때 실행되는 이벤트 처리기 |
oninput | 사용자가 입력한 값이 즉시 변경될 때 실행되는 이벤트 처리기 |
onsubmit | 폼이 제출될 때 실행되는 이벤트 처리기 |
onreset | 폼이 리셋될 때 실행되는 이벤트 처리기 |
onselect | 사용자가 텍스트를 선택했을 때 실행되는 이벤트 처리기 |
onresize | 윈도우나 요소의 크기가 변경될 때 실행되는 이벤트 처리기 |
onscroll | 사용자가 스크롤을 할 때 실행되는 이벤트 처리기 |
oncontextmenu | 마우스 우클릭 시 나타나는 컨텍스트 메뉴가 나타날 때 실행되는 이벤트 처리기 |
onload | 페이지나 리소스가 로드될 때 실행되는 이벤트 처리기 |
onunload | 페이지나 리소스가 언로드될 때 실행되는 이벤트 처리기 |
onerror | 페이지나 리소스에서 에러가 발생할 때 실행되는 이벤트 처리기 |
onbeforeunload | 페이지를 떠나기 전에 경고 메시지를 표시할 때 실행되는 이벤트 처리기 |
oninput | 사용자가 입력 요소에 값을 입력할 때 실행되는 이벤트 처리기 |
oncopy | 사용자가 요소를 복사할 때 발생하는 이벤트 처리기 |
oncut | 사용자가 요소를 잘라낼 때 발생하는 이벤트 처리기 |
onpaste | 사용자가 요소에 붙여넣기할 때 발생하는 이벤트 처리기 |
- 예제 코드(ChatGPT 응답)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 이벤트 속성 예제</title>
<style>
.event-box {
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
width: 300px;
}
.output {
margin-top: 10px;
padding: 5px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>HTML 이벤트 속성 예제</h1>
<div class="event-box">
<h3>1. onclick</h3>
<button
onclick="document.getElementById('onclick-output').innerText = '버튼을 클릭했습니다.'"
>
클릭하세요
</button>
<p class="output" id="onclick-output"></p>
</div>
<div class="event-box">
<h3>2. ondblclick</h3>
<p class="output" id="ondblclick-output"></p>
<button
ondblclick="document.getElementById('ondblclick-output').innerText = '버튼을 더블 클릭했습니다.'"
>
더블 클릭하세요
</button>
</div>
<div class="event-box">
<h3>3. onmouseover / onmouseout</h3>
<button
onmouseover="this.style.backgroundColor='lightcyan'"
onmouseout="this.style.backgroundColor='lightpink'"
>
마우스를 올려보세요
</button>
</div>
<div class="event-box">
<h3>4. onkeydown / onkeyup</h3>
<input
type="text"
placeholder="키를 꾹 누르다 떼주세요."
onkeydown="document.getElementById('keydown-output').innerText = '키를 눌렀습니다.'"
onkeyup="document.getElementById('keyup-output').innerText = '키를 뗐습니다.'"
/>
<p class="output" id="keydown-output"></p>
<p class="output" id="keyup-output"></p>
</div>
<div class="event-box">
<h3>5. onfocus / onblur</h3>
<input
type="text"
onfocus="this.style.backgroundColor='lightblue'; this.placeholder=''"
onblur="this.style.backgroundColor=''; this.placeholder='포커스를 해제하였습니다.'"
/>
</div>
<div class="event-box">
<h3>6. oninput</h3>
<input
type="text"
oninput="document.getElementById('input-output').innerText = '입력 중입니다: ' + this.value"
/>
<p class="output" id="input-output"></p>
</div>
<div class="event-box">
<h3>7. onchange</h3>
<input
type="text"
onchange="document.getElementById('change-output').innerText = '값 입력 후 Enter를 눌러주세요.\n현재 값입니다: ' + this.value"
placeholder="Enter를 눌러주세요."
/>
<p class="output" id="change-output"></p>
</div>
<div class="event-box">
<h3>8. onsubmit</h3>
<form
onsubmit="event.preventDefault(); document.getElementById('submit-output').innerText = '폼이 제출되었습니다.'"
>
<input type="text" placeholder="폼 입력" />
<button type="submit">제출</button>
</form>
<p class="output" id="submit-output"></p>
</div>
<div class="event-box">
<h3>9. onscroll</h3>
<div
style="width: 300px; height: 100px; overflow: scroll"
onscroll="document.getElementById('scroll-output').innerText = '스크롤 중입니다!'"
>
<div style="height: 300px">스크롤을 해보세요.</div>
</div>
<p class="output" id="scroll-output"></p>
</div>
<div class="event-box">
<h3>10. oncontextmenu</h3>
<div
oncontextmenu="this.innerText += '\n우클릭 했습니다!'"
style="width: 300px; height: 100px; background-color: lightgray"
>
우클릭을 해보세요.
</div>
</div>
</div>
</body>
</html>10-02 이벤트와 클래스로 스타일 변경
- 클래스로 미리 스타일 설정 후 이벤트로 클래스 변경
[element].classList.contains: 요소에 클래스 추가[element].classList.remove: 요소에 클래스 제거[element].classList.toggle: 요소에 클래스 부재 시 추가, 존재 시 제거
<!DOCTYPE html>
<html lang="ko">
<head>
<title>evnet control</title>
<!-- 클래스명을 변경함으로써 동적으로 CSS 적용 -->
<style>
.active {
background-color: aqua;
font-size: 24px;
}
.select {
color: red;
border: 2px solid blue;
}
</style>
<script>
function func1() {
let h1 = document.getElementById("header1");
if (h1.classList.contains("active")) {
h1.classList.remove("active");
} else {
h1.classList.add("active");
}
}
function func2() {
let h1 = document.getElementById("header1");
h1.classList.toggle("select");
}
</script>
</head>
<body>
<h1 id="header1" class="">액티브 셀렉트</h1>
<button onclick="func1();">액티브 Active</button>
<button onclick="func2();">셀렉트 Select</button>
</body>
</html>10-03 이벤트 핸들러
- 이벤트 핸들러 테이블(ChatGPT 응답)
| 함수명 | 설명 | 예시 코드 |
|---|---|---|
addEventListener() | 이벤트를 특정 요소에 추가합니다. 한 요소에 여러 이벤트 리스너를 추가할 수 있습니다. | element.addEventListener('click', handler); |
removeEventListener() | 특정 이벤트 리스너를 요소에서 제거합니다. | element.removeEventListener('click', handler); |
dispatchEvent() | 특정 이벤트를 해당 요소에서 발생시킵니다. | element.dispatchEvent(event); |
event.preventDefault() | 기본 동작을 취소합니다 (예: 링크 클릭 시 페이지 이동을 막음). | event.preventDefault(); |
event.stopPropagation() | 이벤트가 상위 요소로 전파되지 않도록 막습니다. | event.stopPropagation(); |
event.stopImmediatePropagation() | 현재 이벤트와 다른 리스너의 실행을 중지합니다. | event.stopImmediatePropagation(); |
event.target | 이벤트가 발생한 DOM 요소를 반환합니다. | let target = event.target; |
event.currentTarget | 이벤트 리스너가 연결된 DOM 요소를 반환합니다. | let currentTarget = event.currentTarget; |
event.type | 발생한 이벤트의 타입을 반환합니다. | console.log(event.type); |
event.timeStamp | 이벤트가 발생한 시간을 밀리초 단위로 반환합니다. | console.log(event.timeStamp); |
event.isTrusted | 이벤트가 사용자의 행동에 의해 발생했는지 확인합니다. | console.log(event.isTrusted); |
출처: 한국경제신문 K-Digital Training - toss bank
첨고 서적:
윤인성 지음, 혼자 공부하는 자바스크립트, 한빛미디어, 2021년
고경희 지음, Do it! HTML+CSS+자바스크립트 웹 표준의 정석, 이지스퍼블리싱, 2024년
