TIL 231030(JS 요소 찾기)

자바스크립트 문법 사용 시 특정 요소 찾는 메서드 사용법 적어본다.

대표적으로

querySelector

getElementById

getElementsByClassName 가 있다.

사용법은

document.querySelector('.클래스일경우'or '#아이디일경우')
document.getElementById('찾을 요소')
document.getElementsByClassName('찾을 요소')

이런 식으로 요소를 찾은 후 그 뒤에 주고 싶은 이벤트를 .을 붙여 사용하면 된다.

예시 1) 아이디명이 tiTle인 p태그 내용 바꾸고 싶다면 !?

 document.getElementById('tiTle').innerHTML = '~~'
 document.querySelector('#tiTle').innerHTML = '~~'

예시 2) 클래스명이 className 중 2번째인 인풋창을 뜨지 않게 하고 싶다면 !?

document.getElementsByClassName('className)[2].style.display='none';

예시 3) 아이디명이 closeButton인 버튼을 눌렀을 때, 아이디명이 aLert인 모달창이 닫히게 하고 싶다면?

document.getElementById('closeButton').addEventListner('click', function(){
document.getElementById('aLert'}.style.display='none';
})'

제이쿼리로 사용하면

$('#closeButton').on('click',function(){
$('#aLert').css('display', 'none')
});

이런 식으로 사용 가능하다.
클래스명 추가 같은 경우 변수 선언 해놓고, addEventListener 콜백 함수 안에 클래스 추가 속성을 집어 넣고 버튼을 누르면 사라지게 하는 css 처리를 해두면 편하게 사용할 수 있다.

1)찾은 요소의 클래스명을 없애고 새로 만들거나, 2)기존의 클래스명에 추가로 클래스명을 더 만들 수도 있다.

1) 찾은 요소.className = '변경할 클래스명';
2) 찾은 요소.classList.add('추가할 클래스명');

querySelector 사용 시 유의할 점이 있다.
찾을 요소인 아이디가 여러 개 존재한다면, querySelector 사용 시 제일 위에 위치한 요소만 찾아준다.
동일한 여러 아이디 중 한가지를 찾고 싶다면, querySelectorAll을 사용하면 된다. 그리고 찾고 싶은 아이디의 인덱스 번호를 과 같이 뒤에 적어주면 된다.

document.querySelectorAll('#id')[2]