JS | 선택자! 요소를 선택하는 다양한 방법

 

 

요소를 제어하기 위해서 가장 먼저해야할 것은 그 요소를 선택하는 것이다. 그 요소를 어떻게 불러와서 제어를 하는걸까? 선택자를 통해서 요소를 불러온다.

 

Javascript로 요소를 선택하는 방법

 

//ID 값으로 요소선택
var button = document.getElementById("button");

//name값으로 요소선택 (form요소 참고)
var form = document.getElementsByName("form_name");

//Class 이름으로 요소선택
var button = document.getElementsByClassName("button");

//특정 태그명가진 요소선택
var z = document.getElementsByTagName("li");

 

요즘 자주 쓰는 것처럼 보이는 것은 querySelector인데

//CSS선택자를 기준으로 1번째 요소
var el = document.querySelector(".car");

//CSS선택자에 맞는 모든 요소를 Nodelist로 반환
var x = document.querySelectorAll(".group");

 

 

jQuery로 요소를 선택하는 방법

 

//태그요소 선택
$('div')

//클래스요소 선택
$('.container')

//ID요소 선택
$('#myName')

//계층관계를 이용한 선택
$('#myName > p ') //Id가 myName인 요소 자식요소인 p를 선택

 

그 외에 속성으로 선택하는 등 선택자는 여러가지 방식이 있다.  https://api.jquery.com/category/selectors/

 

alert요소를 동적으로 제어하면서 선택한 요소 외의 같은 디자인의 다른 형제요소들을 한꺼번에 제어할 일이 있었는데 이러한 방식으로 해결하였다.

$("#id").nextAll().each(function() {
  let element_top = $(this).offset().top;
  $(this).offset({'top': element_top + 100 }, 300);
});

.nextAll()로 선택자 다음 형제요소들을 한꺼번에 선택할 수 있다.

 

---

사실 JS나 jQuery나 CSS나 선택자는 비슷하다. 아래는 CSS 선택자 공부하기 좋은 게임

https://flukeout.github.io/