JavaScript

[DOM_Element] JS - querySelectorAll() 메서드 - Element객체의 쿼리선택자_전부 (= 쿼리선택자_모두) (IE9)

querySelectorAll() 예제

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz">

  <h2 class="sinbi">홈짱닷컴</h2>

  <p class="sinbi">Homzzang.com</p> 

</div>


<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  var x = document.getElementById("hz").querySelectorAll(".sinbi");

  x[0].style.backgroundColor = "yellow";

}

</script>

 

결과보기

※ node 색인번호는 0부터 시작.

※ x.length : 2

※ 지정선택자와 일치하는 모든자식요소 노드리스트객체 반환.

 


분류 제목
Form JS - Forms - 폼양식 유효성 제어
DOM JS - Document - 문서객체
DOM JS - Element Selector - 주요 요소선택자 (= 객체찾기) ※ JS외부링크호출 주의사항
DOM_Document JS - Document 객체 - 웹문서 객체의 속성/메서드 종류 (= document객체 = 다큐먼트객체)
DOM_Element JS - Element 객체 - 요소객체 (속성 + 메서드) 종류
DOM_Document JS - getElementById() 메서드 ★★★ - 아이디선택자 (= 아이디로 요소얻기 = 아이디로 요…
DOM_Document JS - getElementsByClassName() 메서드 ★★ - 클래스선택자 (= 클래스명선택자 = 클…
DOM_Document JS - getElementsByName() 메서드 ★ - 네임선택자
DOM_Document JS - getElementsByTagName() 메서드 ★ - 태그선택자 (= 요소선택자 = getElem…
DOM_Document JS - querySelector() 메서드 ★ - 쿼리선택자 (= 문서 안 지정 선택자 중 첫번째 것만 =…
DOM_Document JS - querySelectorAll() 메서드 ★★★ - 일치요소 모두 선택 (= querySelecto…
DOM_Element JS - getElementsByClassName() 메서드 - 클래스선택자 (= 클래스명선택자 = 클래스이…
DOM_Element JS - getElementsBy태그Name() 메서드 - 태그선택자 (= 요소선택자 = 태그명선택자 = 태…
DOM_Element JS - querySelector() 메서드 ★ - 쿼리선택자 (= 요소 안 지정 선택자 중 첫번째 것만) …
DOM_Element JS - querySelectorAll() 메서드 - Element객체의 쿼리선택자_전부 (= 쿼리선택자_모…
1/2
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드 1
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인