DOM(Document Object Model): 트리 구조 형태의 문서 구조 표현 방식
노드 타입
document
<h1>
, <p>
등href
, src
<!-- 주석 -->
getElementById()
, getElementsByClassName()
, getElementsByTagName()
querySelector()
, querySelectorAll()
(CSS 선택자 기반)내용 변경
textContent
: 모든 텍스트 접근innerText
: 화면에 표시되는 텍스트innerHTML
: 태그 포함한 HTML 구조스타일 변경
요소.style.color = "red";
데이터 속성 조작
data-*
속성 사용 (element.dataset.속성명
)노드 삭제
부모.removeChild(자식);
document.forms
→ 모든 <form>
요소 접근종류:
등록 방법
인라인 방식: <button>
프로퍼티 리스너: element.onclick = 함수
메서드 방식:
element.addEventListener("click", 함수);
이벤트 객체: 이벤트 발생 시 자동 전달됨
element.addEventListener("click", function(e) {
console.log(e.target);
});
기본 동작 취소
event.preventDefault();
this 사용
this
는 해당 이벤트가 발생한 요소를 가리킴display: flex
등으로 수평 3분할 가능<div class="bg"></div>
section
태그로 각 영역 구성form
, input
, button
등 활용미디어 쿼리 사용
@media (max-width: 768px) {
/* 작은 화면용 CSS */
}
텍스트 삭제 효과
let text = "Hello";
let index = text.length;
const interval = setInterval(() => {
document.querySelector("#target").textContent = text.substring(0, index--);
if (index < 0) clearInterval(interval);
}, 200);
preventDefault()
로 제출 막기