DOM

Source: Dev.to

getElementById()란?

고유한 id 속성을 사용해 단일 HTML 요소를 선택할 때 사용합니다.
일치하는 요소가 있으면 Element 객체를 반환하고, 없으면 null을 반환합니다.

기본 사용법

## Hello

let el = document.getElementById("title");
console.log(el);

Output

## Hello

선택한 요소 조작하기

let el = document.getElementById("title");

// 텍스트 내용 변경
el.textContent = "Hello, JavaScript!";
el.innerText = "Hi!";

// HTML 삽입
el.innerHTML = "**How**";

// 요소 스타일 지정
el.style.color = "red";
el.style.backgroundColor = "yellow";

// 페이지 배경 스타일 지정
document.body.style.backgroundColor = "black";

버튼이 포함된 전체 예제

## Hello

click

let el = document.getElementById("title");
let btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  el.innerText = "Welcome!";
});