querySelector는 무엇인가?
querySelector()를 몇 번은 사용해봤다. 사용할 때마다 '아~ 이거 html 태그 선택해주는 건가보다.' 하고 항상 넘어갔다. 결론적으로는 그게 맞을지도 모르겠다. 하지만 확실하게 정리하고 넘어가고 싶어서 더 알아봐야겠다.
그래서,
querySelctor()는?
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
사용법
document.querySelector('선택자');
예제
index.html
<body>
<div class="element">
<h1> Hello Wolrd</h1>
</div>
<script>
let El = document.querySelector('.element')
let h1El = El.querySelector('h1')
console.log(El); //<div class="element>...</div>
console.log(h1El); //<h1> Hellow Wolrd </h1>
</script>
</body>querySelectorAll()
Document 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다.
사용법
elementList = parentNode.querySelectorAll('선택자');
예제
index.html
<body>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<script>
let El = document.querySelectorAll('.element')
console.log(El); // Nodelist(4)를 반환한다. 이 NodeList에는 class가 element인 div 4개가 포함되어 있다.
</script>
</body>NodeList
새로알게된 점
- 위의 예제에서
h1을 가지고 올 때 el.querySelector('h1')을 이용하여 가지고 올 수 있다는 점 querySelector말고도getElementById도 있다. 추후에 알아보자.
reference
Author And Source
이 문제에 관하여(querySelector는 무엇인가?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gnlals1/querySelector는-무엇인가저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
