[Javascript] getElement*, querySelector*로 요소 접근하기

📚 getElement*, querySelector*로 요소 접근하기 

 

DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있다.

 

🔖 DOM : Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. 

 

 

📒document.getElement* 을 통해 요소 검색하기

 

요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElement* 을 통해 접근이 가능하다. 

 

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 요소 얻기
  let elem = document.getElementById('elem'); // 요소 접근

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

 

 

 

 

📒document.querySelector* 을 통해 요소 검색하기

 

document.querySelector* 주어진 CSS 선택자에 대응하는 요소 중 첫번째 요소를 반환한다. 따라서 모든 요소를 반환하는 것을 원한다면, document.querySelectorAll 을 이용한다. 

 

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child'); // 요소 접근

  for (let elem of elements) {
    alert(elem.innerHTML); // "1-2", "2-2"
  }
</script>