<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h2>querySelector() 함수</h2><prestyle="border : 1px solid #000;">
형식 : document.querySelect("셀렉터명");
</pre><p>제공한 선택자 또는 선택자 그룹과 일치하는 문서 내 첫 번째[0번인덱스] Element를 반환한다.
<br>
일치하는 요소가 없으면 null을 반환한다.
</p><divid="firstDiv">첫째 DIV</div><divid="secDiv">둘째 DIV</div><divclass="divClass">DIV 클래스1</div><divclass="divClass">DIV 클래스2</div><divclass="divClass">DIV 클래스3</div><divid="threeDiv"><divclass="divClass">DIV 클래스4</div><divclass="divClass">DIV 클래스5</div><divclass="divClass">DIV 클래스6</div></div><script>let a = document.querySelector('#firstDiv');
// [0]하나만, 찾는 게 없을 경우 null값 반환console.log(a);
let b = document.querySelector('#fDiv');
console.log(b);
let c = document.querySelector('#secDiv');
console.log(c);
let d = document.querySelector('.divClass');
console.log(d);
let e = document.getElementById("threeDiv").querySelector('.divClass');
console.log(e);
</script></body></html>
\
ㄴㅁㄹ
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h2>querySelectorAll() 함수</h2><prestyle="border: 1px solid #000">
형식 : document.querySelectorAll("셀렉터명");
</pre><p>제공한 선택자 또는 선택자 그룹과 일치하는 문서의 Element배열을 반환한다.<br>
일치하는 요소가 없으면 빈 배열객체를 반환한다.
</p><divclass="outer"><divclass="select"><divclass="inner">innerDiv1</div></div><divclass="select"><divclass="inner">innerDiv2</div></div><divclass="select"><divclass="inner">innerDiv3</div></div></div><divclass="outer1"><divclass="select"><divclass="inner">innerDiv4</div></div><divclass="select"><divclass="inner">innerDiv5</div></div><divclass="select"><divclass="inner">innerDiv6</div></div></div><script>let a = document.querySelector('.select');
//querySelector 해당 엘리먼트에 대한 것을 모두 가져온다console.log('a: ', a);
let b = document.querySelector('.select > .inner');
//자식으로 존재하는 inner class들중 [0]인덱스 selectconsole.log('b: ', b);
let c = document.querySelectorAll('body .inner');
// querySelectorAll배열로 가져오는 것// document.querySelectorAll() => new Array(); => []console.log('c: ', c);
// let c1 = a.querySelectorAll('body .inner');// console.log('c1: ', c1);let d = document.querySelectorAll('.select');
console.log('d: ', d);
// e객체 : let e = new Array(); => [] //null값으로 반환 못함let e = document.querySelectorAll('#select');
console.log(e);
console.log('e: ', e);
</script></body></html>
