자바스크립트 제어 할 태그 선택

제어 할 태그 선택

웹 페이지의 특정 태그를 동적으로 선택하고 선택된 태그의 스타일 속성을 변경하는 방법 중 하나다.

 

getElementsById ( Id 선택자 )

• 가장 간단하고 효율적임
• 각 태그는 고유한 id를 가질 수 있어 id를 통해 해당 태그를 쉽게 선택
• html 코드에 id 속성 추가
• 동일한 id를 가진 태그가 여러개 존재할 경우 오류 발생

예시

<button id="my-button">버튼</button>

<script>

const button = document.getElementById("my-button");
button.addEventListener("click" , function(){
	alert("success");
});

</script>

 

 

getElementsByClassName ( Class 선택자)

• 하나 이상의 태그에 동일한 클래스 이름을 부여하여 선택
• id 선택자 보다 유연하고 재사용 가능
• html 코드에 class 속성 추가
• 동일한 class를 가진 태그가 여러개 선택 가능

예시

<button class = "my-button"> 버튼 1 </button>
<button class = "my-button"> 버튼 2 </button>

<script>

const button = document.getElementsByClassName("my-button");

for(const button of buttons){
  button.addEventListner("click",function(){

	//버튼 클릭시 실행 할 코드
        alert("hello");

	});

};

 

 

getElementsByTagName (태그 이름 선택자 )

• 특정 태그 이름을 가진 모든 태그 선택
• 가장 간단하지만 선택 범위가 넓어 정확도가 낮을 수 있음

예시

const buttons = document.getElementsByTagName("button");​

 

 

querySelector (css 선택자 )

• css선택자를 사용하여 태그 선택
• Id, 클래스 , 태그이름 , 속성 등을 조합하여 더욱 정교하게 선택 가능
• 가장 유연하고 가장 강력함

const buttons = document.querySelector(".my-button:first-child");