FE/인터렉티브 웹

자바스크립트로 HTML 요소 선택하기

이제하네 2023. 10. 14. 22:41

document.querySelector() - 요소 선택하기

예시를 위한 HTML 파일
예시를 위한 JS파일
개발자 모드의 콘솔에 값이 출력

 

document.querySelectorAll() - 요소를 모두 선택하기

요소를 여러개 가져오기 위해 All을 붙힘
하지만 값을 NodeList으로 가져옴 ==> NodeList를 반복문을 사용해서 요소를 하나씩 선택해야함
for of 문으로 작성
for 문으로 작성

  • for of 문을 활용하면 여러 개의 요소를 편하게 반복하며 코드를 실행할수 있지만 반복되는 요소의 순섯값을 코드 내부에서 활용하기 위해서는 for 문을 활용하는것이 좋다!

article에 모든값이 콘솔에 출력됨

 

부모,자식,형제 요소 선택하기

예시를 위한 HTML 파일

 

  • 자식 요소를 선택하기

자식 요소를 선택하기위한 JS 파일
콘솔에 찍힌 값

  • 부모 요소 선택하기

부모 요소를 선택하기 위한 JS파일
콘솔에 찍힌 값

  • 제일 가까운 상위 부모 요소 선택하기

상위 붐모 요소를 선택하기 예시를 위한 HTML파일
예시를 위한 JS파일
콘솔에 찍힌 값

  • 형제 요소 선택하기

예시를 위한 JS파일
콘솔에 찍힌 값