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