DOM Selector in javascript / 자바스크립트의 선택자 querySelector()

<div id='main'>
  <div class="container">
  </div>
</div>

 ---------------------------------------

(1) 아이디(id)가 main인 요소 선택


document.getElementById('main');

document.querySelector('#main');

(2) 클래스명이 container인 요소 선택


document.getElementsByClassName('container');

document.querySelector('.container');  //같은 이름의 클래스가 다수인 경우 첫번째 container 선택

document.querySelectorAll('.container');  //같은 이름의 클래스가 다수 인 경우 해당하는 모든요소 선택

(3) div태그 요소 선택


document.getElementsByTagName('div');

document.querySelector('div');  //div  태그가 다수인 경우 첫번째 div 선택

document.querySelectorAll('div');  //div  태그가 다수인 경우 모든 div 선택



Browser compatibility(브라우저 지원)


FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1(Yes)3.58103.2

댓글

댓글 쓰기

이 블로그의 인기 게시물

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기

Flip Card in pure CSS / CSS만으로 카드 뒤집기

  <style> .container {position: relative;   -webkit-perspective: 1000;   -moz-perspective: 1000;   -ms-perspective: 1000;   -o-perspective: 1000; } .card { width: 200px; height: 200px;margin: 0 auto; position: relative;   -webkit-transform-style: preserve-3d;   -webkit-transition: 0.5s;   -moz-transform-style: preserve-3d;   -moz-transition: 0.5s;   -ms-transform-style: preserve-3d;   -ms-transition: 0.5s;   -o-transform-style: preserve-3d;   -o-transition: 0.5s;   transition: 0.5s; } .face {position: absolute; backface-visibility: hidden; width: 100%; height: 100%; color: white; line-height: 200px; text-align: center;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   -o-backface-visibility: hidden;  } .front {background: skyblue; z-index: 10;} .back {background: pink;   -webkit-transform: rotateY(180deg);   -mo...
자세한 내용 보기

Flip Card in pure javascript / 순수 자바스크립트만으로 카드 뒤집기

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <title>Document</title>   <style> #card{position:relative; width:200px; height:200px; margin:0 auto; } #front{position:absolute; top:0; left:0; color:white; font-size: 30px; text-align:center; line-height:200px;background-color: skyblue; width:100%;}   </style>  </head>  <body> <div id="card" onclick="flip()">  <div id="front" > Front content  </div> </div> <script>   var k = 0;   function flip() {     var card = document.getElementById("card");     k += 180;     card.style.transform = "rotatey(" + k + "deg)";     card.style.transitionDuration = "0.5s";   } </script>  </body> </html> ------------------------------------------------------------------------------- ...
자세한 내용 보기