[ JS ] - DOM

200원짜리개발자·2024년 6월 12일

JavaScript

FrontEnd

목록 보기

22/29

제로베이스 자바스크립트 기초개념 DOM 부분 정리
축약된 부분이 존재할 수 있습니다.

DOM

DOM(Document Object Model)이란, HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 해줍니다.

Node와 Element

노드(Node)

요소 텍스트, 주석 등의 각 구조를 의미합니다.
요소(Element)
노드의 하위 객체로 요소를 의미합니다.

const parentEl = document.querySelector(".parent");
  
// 요소의 모든 자식 노드를 확인합니다.
// 요소, 텍스트, 주석 전부 나옴
console.log(parentEl.childNodes);
  
// 요소의 모든 자식 요소를 확입합니다.
// 자식 요소만 나옴
console.log(parentEl.children);

검색과 탐색

document.querySelector(선택자)

선택자로 검색한 요소를 하나 반환합니다.
만약 검색 결과가 없으면, 'null'을 반환합니다.

// 가장 먼저 만나는 요소를 반환한다.
const el = document.querySelector("div");
console.log(el);
  
// 이런식으로 자식 요소를 찾을 수도 있다.
el.querySelector("div");

document.querySelectorAll(선택자)

선택자로 검색한 모든 요소를 NodeList 객체로 반환합니다.

const nodeList = document.querySelectorAll("div");
console.log(nodeList);
  
// NodeList는 유사 배열이며, '.forEach()' 메소드는 내장되어 있지만,
// 기타 배열 메소드는 사용할 수 없다.
nodeList.forEach((e, i) => console.log(i + 1, e));
  
// NodeList 객체는 'Array.from()' 메소드를 통해서 배열로 변환할 수 있다.
const nodes = Array.from(nodeList);
const names = nodes.map((e) => e.textContent);
console.log(names);

document.getElementById(아이디)

HTML 'id' 속성(Atrributes) 값으로 검색한 요소를 하나 반환합니다.
만약 검색 결과가 없으면, 'null'을 반환합니다.

const idEl = document.getElementById("apple");
console.log(idEl);
  
const selEl = document.querySelector("#apple");
console.log(selEl);

노드.parentElement

노드의 부모 요소를 반환합니다.

const selEl = document.querySelector("#apple");
console.log(selEl);
console.log(selEl.parentElement);

Sibling

요소.previousElementSibling

요소의 이전 형제 요소를 반환합니다.
요소.nextElementSibling
요소의 다음 형제 요소를 반환합니다.

const selEl = document.querySelector("#apple");
console.log(selEl.previousElementSibling);
console.log(selEl.nextElementSibling);

자식 요소

요소.children

요소의 모든 자식 요소를 반환합니다.
요소.firstElementChild
요소의 첫 번째 자식 요소를 반환합니다.
요소.lastElementChild
요소의 마지막 자식 요소를 반환합니다.

const selEl = document.querySelector("div");
console.log(selEl.children);
console.log(selEl.children[selEl.children.length - 1]);
console.log(selEl.firstChild);
console.log(selEl.lastChild);

생성, 조회, 수정

document.createElement(태그이름)

HTML 요소를 메모리상에 생성해 반환합니다.

const divEl = document.createElement("div");
divEl.textContent = "안녕하세요!";
divEl.classList.add("hello");
console.log(divEl);
  
const inputEl = document.createElement("input");
inputEl.value = "입력하세요!";
console.log(inputEl);
  
const buttonEl = document.createElement("button");
buttonEl.textContent = "버튼입니다!";
console.log(buttonEl);
  
// HTML body에 추가하기
document.body.append(divEl, inputEl, buttonEl);

append

요소.prepend(노드1, 노드2, ...)

하나 이상의 노드를 요소의 첫 번째 자식으로 삽입합니다.
요소.append(노드1, 노드2, ...)
하나 이상의 노드를 요소의 마지막 자식으로 삽입합니다.
노드.appendChild(노드1)
하나의 노드를 노드의 마지막 자식으로 삽입하고, 삽입한 노드를 반환합니다.

const parentEl = document.createElement(".parent");
  
const divEl = document.createElement("div");
divEl.textContent = "새로운 요소!";
  
const inputEl = document.createElement("input");
  
const res1 = parentEl.prepend(new Comment(" 새로운 주석 "));
const res2 = parentEl.append(divEl, "새로운 텍스트");
const res3 = (parentEl.appendChild(inputEl).placeholder = "값을 입력하세요!");
  
console.log(res1, res2);
console.log(res3);

요소.remove

요소를 제거합니다.

const el = document.querySelector("#apple");
  
console.log(el);
el.remove();

노드.contains(노드)

주어진 노드가 대상 노드를 포함한 후손인지 확인합니다.

const parentEl = document.querySelector(".parent");
const appleEl = document.querySelector("#apple");
  
console.log(parentEl.contains(appleEl));
console.log(document.body.contains(parentEl));
console.log(document.body.contains(appleEl));
console.log(document.body.contains(document.body));
console.log(parentEl.contains(document.body));
console.log(appleEl.contains(document.body));

노드.textContent

노드의 모든 텍스트를 확인(GET)하거나 지정(SET)합니다.

// GET
const el = document.querySelector("#apple");
console.log(el.textContent);
  
// SET
el.textContent = "오렌지";
console.log(el.textContent);

요소.innerHTML

요소의 내부 HTML을 확인(GET)하거나 지정(SET)합니다.

// GET
const el = document.querySelector("#apple");
console.log(el.innerHTML);
  
// SET
el.innerHTML = `<div class="apple" style="font-size: 100px; color: red;">두리안</div>`;
console.log(el.innerHTML);

요소.dataset

요소의 'data-' 속성을 확인(GET)하거나 지정(SET)합니다.

const el = document.querySelector("#apple");
const str = "Hello World";
const num = 123;
const obj = {
  a: 1,
  b: 2,
};
  
console.log(el.dataset);
  
el.dataset.helloWorld = str;
el.dataset.number = num;
// 객체 같은 경우는 JSON문자 형식으로 변환해야된다.
el.dataset.object = JSON.stringify(obj)
  
console.log(el.dataset);
  
console.log(el.dataset.helloWorld);
console.log(el.dataset.number);
console.log(JSON.parse(el.dataset.number));
console.log(el.dataset.object);
console.log(JSON.parse(el.dataset.object));

요소.classList

요소의 'class' 속성을 제어합니다.

요소.classList.add()

값을 추가
요소.classList.remove()
값을 제거
요소.classList.toggle()
값을 토
요소.classList.contains()
값을 확인

const el = document.querySelector("#apple");
  
el.classList.add("active");
console.log(el.classList.contains("active"));
  
el.classList.remove("active");
console.log(el.classList.contains("active"));
  
el.addEventListener("click", () => {
  el.classList.toggle("active");
  console.log(el.classList.contains("active"));
});

요소.style

요소의 'style' 속성을 확인(GET)하거나 지정(SET)합니다.

const el = document.querySelector("#apple");
  
// 개별 지정 할 수 있다.
el.style.width = "100px";
el.style.fontSize = "20px";
el.style.backgroundColor = "green";
el.style.position = "absolute";
  
// 한 번에 지정할 수 있습니다.
Object.assign(el.style, {
  width: "100px",
  fontSize: "20px",
  backgroundColor: "green",
  position: "absolute",
});
  
console.log(el.style);
console.log(el.style.width);
console.log(el.style.fontSize);
console.log(el.style.backgroundColor);
console.log(el.style.position);

Attribute(속성)

참고로 HTML의 속성은 Attribute이고, CSS와 JS의 속성은 Property라고 한다.
요소.getAttribute(속성)

요소의 속성을 확인합니다.
요소.setAttribute(속성, 값)
요소에 속성과 값을 지정합니다.
요소.hasAttribute(속성)
요소에 속성이 있는지 확인합니다.
요소.removeAttribute(속성)
요소에 속성을 제거합니다.

const el = document.querySelector("#apple");
  
console.log(el.getAttribute("class"));
console.log(el.getAttribute("title"));
  
// 덮어쓰여진다.
// el.setAttribute("class", "hello-world")
el.setAttribute("title", "Hello-World");
  
console.log(el.hasAttribute("class"));
console.log(el.hasAttribute("title"));
console.log(el.hasAttribute("value"));
  
el.removeAttribute("class");
el.removeAttribute("title");

크기와 좌표

window.innerWidth

화면(Viewport)의 너비를 얻습니다.
window.innerHeight
화면(Viewport)의 높이를 얻습니다.
window.scrollX
화면에서 스크롤된 x축의 위치를 얻습니다.
window.scrollY
화면에서 스크롤된 y축의 위치를 얻습니다.

console.log(window.innerWidth);
console.log(window.innerHeight);
  
console.log(window.scrollX);
console.log(window.scrollY);
  
window.addEventListener("scroll", () => {
  console.log(window.scrollY);
});

scrollTo()

window.scrollTo() 와 요소.scrollTo() 가 있음
지정된 좌표로 대상을 스크롤합니다.

대상.scrollTo(X좌표, Y좌표)
대상.scrollTo({
left: X좌표,
top: Y좌표,
behavior: "smooth"
})

setTimeout(() => {
  // window.scrollTo(0, 200);
  window.scrollTo({
    left: 100,
    top: 200,
    behavior: "smooth",
  });
}, 2000);

Width | Height

요소.offsetWidth

테두리 선을 포함한 요소의 너비를 얻습니다.
요소.offsetHeight
테두리 선을 포함한 요소의 높이를 얻습니다.
요소. clientWidth
테두리 선을 제외한 요소의 너비를 얻습니다.
요소, clientHeight
테두리 선을 제외한 요소의 높이를 얻습니다.
요소. scrollWidth
테두리 선을 제외한 요소의 스크롤 영역 너비를 얻습니다.
요소. scrollHeight
테두리 선을 제외한 요소의 스크롤 영역 높이를 얻습니다.

const parentEl = document.querySelector(".parent");
const appleEl = document.querySelector(".apple");
  
console.log(parentEl.clientWidth, parentEl.clientHeight);
console.log(appleEl.clientWidth, appleEl.clientHeight);
  
console.log(parentEl.offsetWidth, parentEl.offsetHeight);
console.log(appleEl.offsetWidth, appleEl.offsetHeights);
  
console.log(parentEl.scrollWidth, parentEl.scrollHeight);
console.log(appleEl.scrollWidth, appleEl.scrollHeight);

200원짜리개발자

고3, 프론트엔드

이전 포스트

[ JS ] - 표준 내장 객체

다음 포스트