Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 제어대상 찾기 querySelector , querySelectorAll 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 제어대상 찾기 querySelector , querySelectorAll

호IT 2021. 2. 7. 14:04

 

 

 

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

-  document.querySelector 

 

 

 

document.querySelector 를 이용하면 css 선택자의 문법을 이용해서 객체를 조회할 수도 있습니다.

 

 

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li>JavaScript</li>
</ol>
 
<script>
    var li = document.querySelector('li');
    li.style.color='red';
    var li = document.querySelector('.active');
    li.style.color='blue';
</script>
</body>
</html>

 

 

 

 

querySelector 는 가장 먼저 검색된 것을 대상으로 지정합니다.

 

 

 

 

 - document.querySelectorAll

 

querySeletor과 동작방법은 같지만 모든 객체를 조회한다는 다른점이있습니다.

 

querySelector 는 한개가 조회되면 검색이 끝나고, querySelectorAll 은 모든 객체를 전부 조회합니다.

 

 

 

 

 

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li>JavaScript</li>
</ol>
 
<script>
    var lis = document.querySelectorAll('li');
    for(var name in lis){
        lis[name].style.color = 'blue';
    }
</script>
</body>
</html>

 

 

 



SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS HTMLElement , DOM Tree  (0) 2021.02.08
[ JavaScript ] JS 제어 대상 찾기 : 제이쿼리(jQuery)  (0) 2021.02.07
[ JavaScript ] JS 제어대상 찾기 getElementById ,getElementsByTagName,getElementsByClassName  (0) 2021.02.07
[ JavaScript ] JS 창(Window) 제어  (0) 2021.02.07
[ JavaScript ] JS Navigator 객체  (0) 2021.02.07
'SUA 정보보안/JavaScript' Related Articles more
Comments