선택자: querySelector('') 매서드 [feat. 생활코딩, 바위처럼]

참고영상: https://www.youtube.com/watch?v=heH2ppuZQco&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7&index=9&t=0s

참고영상: https://www.youtube.com/watch?v=fRGtrlQemhs

 

const li = document.getElementsById('')

const li = document.getElementsByClassName('')

const li = document.getElementsByTagName('') ★배열 + 반복문

const li = document.querySelector('li) ★1나의 엘리먼트를 선택

const li = document.querySelectorAll('li) ★배열 + 반복문(for) / forEach(function(){});

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

 

1. document.querySelector('')는 하나의 선택자만을 선택한다. li의 태그가 여러개 있어도 li 중 제일 큰형을 선택하게 된다.

2. document.querySelectorAll('')은 같은 내용의 모든 태그(엘리먼트)/클래스를 선택한다. 이때 li라는 변수에는 3개의 li가 담긴 변수가 되며 "(유사)배열"의 성질을 가지게 된다!!