CSS 선택자로 검색_js

단일

- html 요소 중 인수에 해당되는 선택자와 일치하는 대상 검색

- 다중 대상을 검색하더라도 단일 1개 객체만 반환한다.

- document.querySelector('선택자');

- 검색된대상객체.querySelector('선택자');

<div id="divWrap">
	<ul>
		<li>안녕하세요1.</li>
		<li>안녕하세요2.</li>
		<li>안녕하세요3.</li>
	</ul>
</div>
<script type="text/javascript">
	var divWrap=document.querySelector('#divWrap');
	console.log(divWrap,'quesySelector');
	var li=divWrap.querySelector('li');
	console.log(li);
	li.onclick=function(){
		this.remove();
	}
</script>

 

다중

- html 요소 중 인수의 선택자 해당되는 모든 객체를 검색하여 배열로 반환

- document.querySelectorAll('선택자');

- 검색 된 대상.querySelectorAll('선택자');

<div id="divWrap2">
	<ul>
		<li>안녕하세요1.</li>
		<li>안녕하세요2.</li>
		<li>안녕하세요3.</li>
	</ul>
</div>
<script type="text/javascript">
	var divWrap2 = document.querySelector('#divWrap2');
	var liArray=divWrap2.querySelectorAll('li');
	console.log(liArray,'querySelectorAll');
</script>