[자바스크립트] HTML DOM 조작어

자바스크립트에서 DOM 요소 조작을 위해 정리해보았습니다.

공식문서와 많은 종류들이 있습니다!

https://developer.mozilla.org/en-US/docs/Web/API/Document

Document - Web APIs | MDN

 

HTML 구조

각각의 이름이 헷깔리니 그림으로 봅시다.

엘리먼트 조회

메서드	설명
document.getElementById(id)	id 찾기
document.getElementByTagName(태그이름)	태그로 찾기 (배열 리턴)
document.querySelector(css선택자)	.class이름, #id이름 (첫번째 요소 리턴)
document.querySelectorAll(css선택자);	.class이름, #id이름 (모든 요소 배열로 리턴)

 

HTML 엘리먼트 확인 / 수정

프로퍼티	설명
element.innerText = HTML에 표시할 내용	엘리먼트 내용 확인 / 수정하기 (태그 미포함)
element.innerHTML = HTML에 표시할 내용	엘리먼트 내용 확인 / 수정하기 (태그 포함)
element.attribute = 값	엘리먼트의 attribute 값 수정
element.style.property = 값	엘리먼트의 CSS 프로퍼티 값 수정
element.setAttribute(attribute, 값)	엘리먼트의 attribute 값 설정

 

HTML 엘리먼트 생성 / 추가

메서드	설명
document.createElement(태그이름)	HTML 엘리먼트 생성
document.appen(엘리먼트)	HTML 엘리먼트 추가(실제 웹 페이지에서 보여지려면 필수)
document.appendChild(엘리먼트)	HTML 엘리먼트 자식요소로 추가

예시

// 엘리먼트 탐색
const item = document.querySelector(".item")

// createElement를 사용하여 새로운 요소를 만든다.
const d = document.createElement('div');

// 이렇게 만들어진 요소는 메모리에만 존재한다. 메소드를 생성하여 DOM에 추가해야 한다.
item.appendChild(d);

 

 

HTML 엘리먼트 삭제/교체

메서드	설명
docuement.removeChild(엘리먼트)	HTML 엘리먼트 삭제
document.replaceChild(변경후, 변경정)	HTML 엘리먼트 대체

 

HTML 엘리먼트/노드 탐색

Node :  Node는 태그 노드와 텍스트 노드 전체

Element : 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킴

프로퍼티	설명
element.parentNode	부모 노드(텍스트, 빈공간.. 등 포함)
element.childNode	자식 노드(텍스트, 빈공간.. 등 포함)
element.parentElement	부모 엘리먼트(태그만 찾는다)
element.childElement	자식 엘리먼트(태그만 찾는다)
element.nextSibling	형제 엘리먼트의 다음 형제 노드(텍스트 빈공간 포함)
element.priviousSibling	형제 엘리먼트의 이전 형제 노드(텍스트 빈공간 포함)
element.nextElementSibling	형제 엘리먼트의 다음 형제 엘리먼트(태그만 찾는다)
element.previousElementSibling	형제 엘리먼트의 이전 형제 엘리먼트(태그만 찾는다)
element.parentElement	부모 요소(배열 반환)
element.childrenElement	자식 요소(배열 반환)
element.firstChild	첫번째 자식요소(텍스트 빈공간 포함)
element.lastchild	마지막 자식요소(텍스트 빈공간 포함)
.firstElementChild	첫번째 자식요소(태그만 찾는다)
.lastElementChild	마지막 자식요소(태그만 찾는다)

 

classList 추가 / 삭제 / 탐색

속성	설명
docuement.classList.add("클래스명")	클래스 이름 추가
docuement.classList.remove("클래스명")	클래스 이름 삭제
docuement.classList.toggle("클래스명")	토글로 사용할 클래스
docuement.classList.replace("변경전", "변경후")	클래스 이름을 교체한다
docuement.classList.contains("클래스명")	포함된 클래스 이름을 찾는다

 

class 추가 / 삭제 / 탐색

	설명
element.className("클래스명")	엘리먼트의 클래스 속성의 값을 가져오거나 설정