CSS 선택자를 이용한 HTML DOM 객체 Handling

선택자 

1. querySelector('key')

document.querySelector('div');

 검색된 결과들 중 첫번째 결과만 반환

2. querySelectorAll('key')

document.querySelectorAll('div');

 검색된 모든 결과를 반환 (리스트로 반환)

 

키값 ==style(css)에서와 동일하게 적용

 

#id

.class

tagname

<style type="text/css">

    <!--#idSelector--.classSelector----tagSelector-->

    #title{

        color:maroon;

    }

    .contents{

        color:pink;

    }

    h2{

        color: gold;

    }

   

</style>

document.querySelector('#title').style.color='maroon'; // # : title이란 id를 가진 노드

document.querySelector('.contents').style.color='pink'; // . : contents란 class를 가진 노드 검색

document.querySelectorAll('h2')[1].style.color='tomato';// tagName : tag로 검색

 

A, B  :  A  또는 B

AB : A 그리고 B 

div,span{

    width: 100px;

}

document.querySelectorAll('span,div');

> div태그 또는 span 태그 

 

#content,div{

    border:1px solid red;

}

document.querySelectorAll('#content,div');

> id가 content인 노드 또는 div태그

 

div.myClass{

    background-color:pink;

}

querySelectorAll('div.myClass');

>div태그 중 class가 myClass인 노드 

 

 

직계자식 ( > ) : 객체의 바로 한 단계 하위의 객체들 

자손 (   ): 객체의 하위 모든 객체들

 

body > div {

    border: 3px dotted orange;

}

document.querySelectorAll('body > div');

> body 의 직계자식 중 div 인 노드들

 

body  div {

    background-color: yellow;

}

document.querySelectorAll('body div');

> body의 자손 중 모든 div 노드들