Javascript DOM 엘리먼트 객체

1. getElementById 

 

2. getElementsByClassName

 

3. querySelector, querySelectAll

---

 

자바스크립트에서 DOM은 HTML에서 document, 즉 html, css에 대한 정보들을 가지고 있다. 이때 html에서 구조를 구성하고 구성한 엘리먼트들에 대한 객체를 구할 수 있는 방법이다.

 

1. getElementById : ID 값을 이용하여 자바스크립트의 객체를 가지고 올 수 있다. 

<ul>
  <li id="hi">HI</li>
  <li id="bye">BYE</li>
</ul>

const hi = document.getElementById("hi");
const bye = document.getElementById("bye");


hi.style.color("red");
bye.style.color("blue");

이런식으로 id getElementById를 이용하여 html id를 찾아오고 폰트색상을 바꾸어 줄 수 있다.

 

 

2. getElementsByClassName : Class 값을 이용하여 자바스크립트 객체를 가지고 올 수 있다.

 

<ul>
  <li class="hi">HI</li>
  <li class="bye">BYE</li>
</ul>

 

const hi = document.getElementsByClassName("hi");
const bye = document.getElementsByClassName("bye");

hi.style.color("red");
bye.style.color("blue");

 

3. querySelector, querySelectAll

querySelector : 지정된 선택자와 일치하는 도큐먼트의 첫번째 엘리먼트만 반환, 일치하는 엘리먼트가 없다면 null을 반환한다.

querySelectAll : 지정된 셀러턱 그룹에 일치하는 도큐먼트의 엘리먼트 리스트를 나타낸다. 해당 선택자에 해당하는 모든 요소들을 가지고 온다. nodeList로 배영객쳉에 대해 for문 혹은 foreach문을 사용해야 한다. 

 

const x = document.querySelector(".hi");
const y = document.querySelectorAll("#bye");