Javascript DOM 조작

#Javascript 기초 정리
Written by Owen2024년 10월 27일 · 4 min read

banner

by Kyojin Hwang


📚카테고리 (Category)

📌 검색 및 탐색

💡 DOM 요소 선택

메서드/프로퍼티 설명
document.getElementById(id) 주어진 id를 가진 단일 요소를 반환.
document.getElementsByClassName(className) 주어진 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환.
document.getElementsByTagName(tagName) 주어진 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환.
document.querySelector(selector) 주어진 CSS 선택자에 맞는 첫 번째 요소를 반환.
document.querySelectorAll(selector) 주어진 CSS 선택자에 맞는 모든 요소를 NodeList로 반환.

사용 예시

// ID로 요소 선택
const header = document.getElementById('header')

// 클래스 이름으로 요소 선택
const items = document.getElementsByClassName('item') // HTMLCollection

// 태그 이름으로 요소 선택
const paragraphs = document.getElementsByTagName('p') // HTMLCollection

// CSS 선택자로 첫 번째 요소 선택
const firstItem = document.querySelector('.item') // 첫 번째 .item 클래스 요소

// CSS 선택자로 모든 요소 선택
const allItems = document.querySelectorAll('.item') // NodeList

📚Move

📌 생성, 조회, 수정

💡 DOM 조작 메서드와 속성

메서드 설명
document.createElement() 메모리에만 존재하는 새로운 HTML 요소를 생성해서 반환합니다.
document.prepend() 선택된 노드 요소의 첫 번째 위치에 새로운 요소를 추가합니다.
document.append() 선택된 노드 요소의 마지막 위치에 새로운 요소를 추가합니다.
document.remove() 요소를 제거한다.
N.textContent 노드의 텍스트를 얻거나 변경한다.
E.innerHTML 요소의 새로운 HTML을 얻거나, HTML 내용의 문자를 얻는다.

사용 예시


💡 HTML 요소의 속성과 사용 설명

속성 설명
data-속성 요소의 data-속성 값을 얻거나 지정한다.
E.tagName 요소의 태그 이름을 반환한다.
E.id 요소의 id를 얻거나 지정한다.
E.className 요소의 class를 얻거나 지정한다.

사용 예시


💡 E.ClassList 및 style 사용법

메서드 설명
classList.add(className) 지정한 클래스를 요소의 클래스 목록에 추가합니다.
classList.remove(className) 지정한 클래스를 요소의 클래스 목록에서 제거합니다.
classList.toggle(className) 지정한 클래스가 있으면 제거하고, 없으면 추가합니다.
classList.contains(className) 지정한 클래스가 요소의 클래스 목록에 있는지 확인합니다.
classList.style.property 요소의 CSS 스타일 속성을 설정하거나 반환합니다.

사용 예시

💡 getAttribute() 및 setAttribute()

메서드 설명
E.getAttribute(attribute) 지정한 속성의 값을 반환합니다.
E.setAttribute(attribute, value) 지정한 속성을 설정하고 값을 지정합니다.

사용 예시


📚Move