Vanilla JS - DOM(Document Object Module) Functions

HTML 에서 모든 요소를 가져와서 DOM 객체로 변경

DOM 객체는 많은 Function을 가지고 있고, Key를 이용해 사용할 수 있다.

• document : 전체 document를 반환

• document.querySelector("#id/.class") - 노드의 첫번째 자식 반환

  const getId = document.getElementById("title");
  const getId2 = document.querySelector("#title");
  ​
  console.log(getId);
  console.log(getId2);

  <h1 id="title">This works!</h1>
  <h1 id="title">This works!</h1>

• document.querySelectorAll("#id/.class") - 아이디/클래스값에 해당하는 모든 요소 반환

• getElementById - ID 선택

  const getId = document.getElementById("title");
  ​
  console.log(getId);
  console.dir(getId); // 자바스크립트 객체의 속성들을 한꺼번에 출력

  <h1 id="title">This works!</h1>

  

• getElementById("id").innerHTML - 태그안의 text 변경

  const getId = document.getElementById("title");
  ​
  getId.innerHTML = "innerHTML 변경";
  console.log(getId);

  <h1 id="title">innerHTML 변경</h1>

• getElementById("id").style - 스타일 변경

  const getId = document.getElementById("title");
  ​
  getId.style.color = "black";
  console.log(getId.style.color);
  ​
  getId.style.color = "red";
  console.log(getId.style.color);

  black
  red