자바스크립트 HTML요소 접근하기 - CSS 선택하기

 

자바스크립트 에서 HTML요소 에 접근하기 위한 방법으로는
CSS 선택자를 활용하는 방법이 있다.
역시 코드를 보자.

  <h1>The Document Object</h1>

  <h2>The querySelector() Method</h2>

  <h3>Add a background color to the first p element:</h3>

  <p>This is a first p element</p>

  <p>This is a second p element</p>

  <script>

    console.log(document.querySelector("p"));

    //document.querySelector("p").style.backgroundColor="red";

  </script>  

핵심은 바로,

document.querySelector("p")

메소드 이다. 인자로 CSS 선택자를 적는다. 
querySelector() 메소드는 해당 선택자로 선택된 모든 요소 중 첫번째 요소만 가져온다.
콘솔로그에 찍힌 값은 하기와 같이 첫째 줄의 요소만 가지고 온다.

<p>This is a first p element</p>

가져온 요소의 배경색상을 바꾸는 코드를 적용하면 

document.querySelector("p").style.backgroundColor="red";

하기와 같은 결과가 나온다.

The Document Object

The querySelector() Method

Add a background color to the first p element:

This is a first p element

This is a second p element

그럼 여기서, 선택자로 선택된 모든 요소를 가지고 오려면?
바로 querySelectorAll() 메소드를 사용한다. 해당 메소드 의 반환값은 nodelist 형 객체 이며, HTML요소 들을 노드 단위로 반환한다.  위 코드를 하기처럼 바꾸자

 <script>

    let nodeList = document.querySelectorAll("p");

    console.log(nodeList);

    for(let i=0; i < nodeList.length ; i++){

      nodeList[i].style.backgroundColor = "red";

    }

  </script>  

document.querySelectorAll() 메소드의 반환 값은 NodeList 객체 타입이다.
그 객체는 배열처럼 선택자로 선택된 "노드" 들을 가지고 있다.

1. NodeList(2) [p, p]
1. 0: p
2. 1: p
3. length: 2

for 문으로 각 요소에 접근하여 색상을 교체한다. 

This is a first p element

This is a second p element

document.selector() 는 CSS 선택자 로 하나의 요소에 접근할때 유리하며,

document.selectorAll() 은 CSS 선택자로 여러개의 요소에 접근할때 사용한다.