[JavaScript] Selector

Web/자바스크립트|2022. 10. 1. 00:52
1. document.getElementsByClassName()
2. document.getElementsByTagName()
3. document.getElementsById()
4. document.querySelector()
5. document.querySelectorAll()

1. Class Selector

document.getElementsByClassName(클래스명)[순서];

  • 클래스는 같은 이름으로 여러 개를 생성 할 수 있음
  • 그러므로 복수인 getElements를 사용함
  • 복수를 선택하므로 몇 번째를 선택했는지 알려줘야 함!
  • 인덱스는 0부터 시작!!!
<body>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>

  <script>
    document.getElementsByClassName('potato')[0].innerHTML = 'potato'
    document.getElementsByClassName('potato')[3].style.color = 'red'
    document.getElementsByClassName('potato').style.color = 'blue'    //순서 선택 안해서 아무 변화 없음
  </script>
</body>

2. Tag Selector

document.getElementsByTagName(태그명)[순서];

  • 클래스를 여러 개 생성하듯
  • 태그도 여러 개 생성 가능
  • 클래스 선택자와 동일하게 사용하면 됨
<body>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>

  <script>
    document.getElementsByTagName('p')[0].style.backgroundColor = 'red'
    document.getElementsByTagName('p')[2].style.backgroundColor = 'blue'
    document.getElementsByTagName('p')[4].style.backgroundColor = 'green'
  </script>

3. Id Selector

document.getElementById(id명);

  • id는 중복되지 않게 작성하는 것이 규칙
  • 그래서 Elements 가 아닌 Element 사용
<p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p id="potatoKing" class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>

  <script>
    document.getElementById('potatoKing').style.fontSize = '30px'
  </script>

4. querySelector

document.querySelector();

  • CSS에서 클래스는 .클래스명{}, id는 #id{} 이런 식으로 선택자를 활용했는데
  • 자바스크립트의 querySelector를 사용하면 비슷하게 쓸 수 있다..!
  • 그런데..!
<body>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p id="potatoKing" class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <div class="potato">div potato</div>
  <div class="potato">div potato</div>
  <script>
    document.querySelector('#potatoKing').style.fontSize = '30px'
    document.querySelector('.potato').style.color = 'red'
    document.querySelector('div').style.color = 'blue'
  </script>
</body>

  • CSS를 생각하면 위 코드를 작성했을 때 모든 클래스와 div 요소의 색상이 변경되어야 하는데
  • 가장 상위의 하나만 변경되었다..?!
  • class, tag 셀렉터에서 동일 항목이 여러 개일 땐 순서를 작성해야 한다고 했는데
  • querySelector에서도 마찬가지고
  • 이를 위해선 querySelectorAll을 써야한다.

5. querySelectorAll

document.querySelectorAll()[순서];

  • 순서 작성이 필수다..!
<body>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p id="potatoKing" class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <p class="potato">talking potato</p>
  <div class="potato">div potato</div>
  <div class="potato">div potato</div>
  <div class="potato">div potato</div>
  <div class="potato">div potato</div>
  <script>
    document.querySelectorAll('.potato')[1].style.color = 'red'
    for (var i = 0; i < 3; i++){
      document.querySelectorAll('div')[i].style.color = 'blue'
    };
    document.querySelector('#potatoKing').style.fontSize = '30px'
  </script>
</body>

  • potatoKing 처럼 하나만 있는 요소를 변경하려면
  • querySelector를 사용하거나 querySelectorAll(’#potatoKing’)[0]을 사용하면 된다.
  • CSS 처럼 한 번에 바꿀 순 없다.
  • 위 코드에선 간단한 for문으로 div 3개를 바꿔보았는데
let a = document.querySelectorAll('div');

for (var i = 0; i < a.length; i++) {
  a[i].style.color = 'blue';
};
  • 위 코드블럭 처럼 작성하면 모든 div 요소를 변경할 수 있다.
저작자표시

'Web > 자바스크립트' 카테고리의 다른 글

[자바스크립트] 변수  (0) 2022.10.19
[자바스크립트] sort()  (0) 2022.10.19
[JavaScript] function - parameter  (0) 2022.09.28
[JavaScript] function 기초  (0) 2022.09.28
[Javascript] HTML 요소 숨기기, 보이기 이벤트 처리  (0) 2022.09.26

댓글()

티스토리툴바