티스토리 뷰

[개발]프로그래밍/javascript

[javascript] querySelector - 문서 객체 가져오기

좋은 블로그 2016. 10. 31. 10:49

1. querySelector,querySelectorAll - 역할

querySelector - 가장 처음 선택되는 문서 객체 가져옴


querySelectorAll - 선택되는 문서 객체를 배열로 가져옴


2. querySelector - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
window.onload = function () {
 var v_font = document.querySelector('#t_font');
     
 alert(v_font);
 //[object HTMLFontElement]
     
 alert(v_font.size);
 //10px
}
</script>
<body>
     <font id="t_font"  size="10px"> test1</font>
     <font id="t_font"  size="15px"> test2</font>
     <font id="t_font"  size="20px"> test3</font>
</body>





◈ 설명


font 태그를 보게 된다면 현재 id 는 모두 t_font로 일치시키고 querySelector를 사용하여 선택된 객체 중 첫번째 객체에 해당하는 정보를 alert 창으로 표시합니다






3. querySelectorAll - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
window.onload = function () {
     var v_font = document.querySelectorAll('#t_font');
     
     alert(v_font);
     //[object NodeList]
     
     alert(v_font[0].size);
     //10px
}
</script>
<body>
     <font id="t_font"  size="10px"> test1</font>
     <font id="t_font"  size="15px"> test2</font>
     <font id="t_font"  size="20px"> test3</font>
</body>








◈ 설명

마찬가지로 위에서는 querySelector 를 활용하여 첫번째 선택된 객체에 해당하는 정보를 가져왔지만, querySelectorAll 를 활용하면 선택된 객체 모두를 배열 형태로 가져와서 원하는 객체에 정보를 확인할 수 있습니다



'[개발]프로그래밍 > javascript' 카테고리의 다른 글

[javascript] removeChild - 객체 제거  (0) 2016.11.01
[javascript] style - 문서 객체 스타일  (0) 2016.11.01
[javascript] getElementsByName - 문서 객체 가져오기  (0) 2016.10.31
[javascript] getElementById - 문서 객체 가져오기  (0) 2016.10.21
[javascript] innerHTML - 문서 객체 생성  (0) 2016.10.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday