Table of Contents
1. DOM의 기본 개념
2. DOM 조작 방법
3. 이벤트 처리
4. DOM 요소 생성 및 삭제
5. DOM 속성 조작
💡 What is CallBack Funtion?
간단히 설명하면, 콜백 함수란 다른 함수의 실행이 끝난 후 실행되는 함수를 말합니다. 함수를 정의할 때, 매개변수로 함수를 받을 수 있고, 이 매개변수로 받은 함수가 바로 콜백 함수입니다.
자세히 설명하면, 자바스크립트에서는 함수도 객체로 취급됩니다. 이 때문에 함수는 다른 함수의 인자로 전달될 수도 있고, 어떤 함수에 의해 반환될 수도 있습니다. 이런 유형의 함수를 고차 함수라고 부릅니다. 결국, 인자로 전달되는 함수를 콜백 함수라고 합니다. 콜백 함수는 단순히 등록만 해두고, 특정 이벤트가 발생하거나 지정된 시점에 도달했을 때 시스템에 의해 자동으로 호출됩니다.
출처
1. Basics of DOM
Characteristics of DOM
- 문서를 트리 구조로 표현
- Each node is treated as object
Tree structure of DOM
A. Document Node
: Root node of the tree
B. Element Node
: HTML Tag
C. Attribute Node
: HTML Attribute
D. Text Node
: HTML Tag's content
2. DOM 조작 방법
요소 선택 방법
JavaScript DOM Element Selection Methods:
getElementById(): 선택된 ID로 단일 요소 선택getElementsByClassName(): 클래스명으로 요소 컬렉션 선택getElementsByTagName(): 태그명으로 요소 컬렉션 선택querySelector(): CSS 선택자로 첫 번째 요소 선택querySelectorAll(): CSS 선택자로 모든 요소 선택
HTML Example:
<div id="myId" class="myClass">
<p class="myClass">Hello</p>
</div>JavaScript Usage Example:
let element = document.getElementById("myId");
let elements = document.getElementsByClassName("myClass");
let divs = document.getElementsByTagName("div");
let firstElement = document.querySelector(".myClass");
let allElements = document.querySelectorAll(".myClass");요소 내용 조작
innerHTML: HTML 내용 읽기/쓰기textContent: 텍스트 내용 읽기/쓰기value: 폼 요소의 값 읽기/쓰기
HTML Example:
<div id="content"></div>
<p id="text"></p>
<input id="input" type="text" />JavaScript Usage Example:
let content = document.getElementById("content");
let text = document.getElementById("text");
let input = document.getElementById("input");
content.innerHTML = "<strong>새로운 내용</strong>";
text.textContent = "텍스트만 변경";
input.value = "새로운 값";요소 스타일 조작
style속성: 인라인 스타일의 직접 조작classList: 클래스 추가, 제거, 토글 (있으면 제거, 없으면 추가)
HTML Example:
<div id="myElement" class="old-class">Hello, World!</div>JavaScript Usage Example:
let element = document.getElementById("myElement");
element.style.color = "red";
element.classList.add("highlight");
element.classList.remove("old-class");
element.classList.toggle("active"); 3. 이벤트 처리
이벤트 리스너 등록
addEventListner()method 사용- 이벤트 타입, 콜백 함수 지정
- 여러 리스너 등록가능
<div id="click-box" class="event-box">클릭하세요</div>
<div id="event-log"></div>// 클릭 이벤트
const clickBox = document.getElementById('click-box');
const eventLog = document.getElementById('event-log');
clickBox.addEventListener('click', function(event2) {
eventLog.innerHTML += '클릭됨!<br>';
this.classList.toggle('highlight');
console.log('클릭 이벤트:', event2);
});
clickBox.addEventListener('mouseover', function() {
console.log('마우스 오버');
});
clickBox.addEventListener('mouseout', function() {
console.log('마우스 아웃');
});주요 이벤트 타입
click: 요소 클릭 시submit: 폼 제출 시keydown,keyup: 키보드 입력 시load: 페이지/이미지 로드 완료 시mouseover,mouseout: 마우스 오버/아웃 시
And More
이벤트 객체 활용
- 이벤트 발생 시 자동 생성
event.target: 이벤트가 발생한 요소event.preventDefault(): 기본 동작 방지
e.g. submit 버튼을 누르면 html 기본 동작 때문에 브라우저에서 자동으로 다른 페이지로 넘어간다. 이런 기본 동작을 실행하지 않을 수 있음event.stopPropagation(): 이벤트 전파 중단
e.g. 중첩된 div가 있을시 상위 div에 click event를 달았을 때 그 안에 하위 div 를 클릭해도 상위 event가 실행된다. 이런 이벤트 전파를 방지할 수 있음.
HTML Example:
<form id="myForm">
<input type="submit" value="Submit" />
</form>JavaScript Usage Example:
let form = document.getElementById("myForm");
form.addEventListener("submit", function (event) {
event.preventDefault();
console.log("Form submission prevented");
});4. DOM 요소 생성 및 삭제
새 요소 생성
Attribute node 는?
1.createElement(): 새 요소 노드 생성
2.createTextNode(): 새 텍스트 노드 생성
3.appendChild(): 부모 노드에 자식 노드 추가
let newDiv = document.createElement("div");
let newText = document.createTextNode("Hello, World!");
newDiv.appendChild(newText);
document.body.appendChild(newDiv);요소 복제
cloneNode(): 노드 복제- 깊은 복사 vs 얕은 복사 시작 가늠
<div id="original">
<p>Original content</p>
</div>let original = document.getElementById("original");
let clone = original.cloneNode(true); // 깊은 복사
document.body.appendChild(clone);요소 삭제
removeChild(): 부모 노드에서 자식 노드 제거remove(): 요소 자체 제거 (최신 브라우저)
<div id="parent">
<p id="child">Child element</p>
</div>let parent = document.getElementById("parent");
let child = document.getElementById("child");
parent.removeChild(child);
// 또는
child.remove();요소 교체
replaceChild(): 기존 자식 노드를 새 노드로 교체
<div id="parent">
<p id="oldChild">Old content</p>
</div>let parent = document.getElementById("parent");
let oldChild = document.getElementById("oldChild");
let newElement = document.createElement("p");
newElement.textContent = "New content";
parent.replaceChild(newElement, oldChild);5. DOM 속성 조작
속성 값 읽기/쓰기
getAttribute(): Read Attribute ValuesetAttribute(): Set Attribute ValueremoveAttribute(): Remove Attribute
Here is the text from the image:
<div id="myElement" class="oldClass">Hello, World!</div>let element = document.getElementById("myElement");
let value = element.getAttribute("class");
element.setAttribute("id", "newId");
element.removeAttribute("style");data-* 속성 활용
dataset속성으로 접근- 사용자 정의 데이터 저장에 유용
<div id="myElement" data-info="some data">Element with custom data</div>let element = document.getElementById("myElement");
element.dataset.customData = "value";
console.log(element.dataset.customData); //note that js uses CamelCase whereas html&css uses `-`
console.log(element.dataset.info);클래스 조작 매서드
classList.add(): 클래스 추가classList.remove(): 클래스 제거classList.toggle(): 클래스 토글classList.contains(): 클래스 존재 여부 확인
setAttribute()와removeAttribute()로도 할 수 있다.
<div id="myElement" class="old-class">Element with classes</div>let element = document.getElementById("myElement");
element.classList.add("new-class");
element.classList.remove("old-class");
element.classList.toggle("active");
let hasClass = element.classList.contains("highlight");
// equivalent to
// if (element.getAttribute("class").indexOf("new-class") ===-a {
// element.setAttribute("class", value + " new-class");}
indexOf는 string을 위함인라인 스타일 조작
style속성으로 직접 접근:setAttribute()나removeAttribute()필요 X- CSS 속성을 코드에서 계산된 값으로 접근
getComputedStyle(): 계산된 스타일의 정보 접근
<div id="myElement" style="color: blue;">Styled element</div>let element = document.getElementById("myElement");
element.style.backgroundColor = "yellow";
let styles = getComputedStyle(element);
console.log(styles.fontSize);본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
#한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업
