dev-story
[JavaScript] querySelector 본문
document객체의 메소드 : 문서를 자바스크립트로 제어하기 위해 문서 내에서 객체를 찾는 방법
document.querySelector
: css선택자의 문법을 이용해서 객체를 조회
조건에 해당하는 요소 하나만 반환한다
인자로
('태그')
('.클래스명')
으로 호출할 수 있다.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li class='active'>CSS</li>
<li>JavaScript</li>
</ol>
<script>
var li = document.querySelector('li'); //가장 처음에 나타나는 5행의 li를 나타낸다.
li.style.color = 'red';
var li = document.querySelector('.active'); //가장 처음에 나타나는 11행의 class='active'
li.style.color = 'blue';
</script>
</body>
</html>
document.querySelectorAll
: querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.
선택자에 해당하는 모든 요소를 유사배열에 담아서 반환
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li class='active'>CSS</li>
<li>JavaScript</li>
</ol>
<script>
var lis = document.querySelectorAll('li'); //li에 해당하는 요소 배열을 lis에 담아줌
for(var name in lis){ //lis를 하나 하나 꺼내서 반복문 실행
lis[name].style.color = 'blue';
}
</script>
</body>
</html>
*** 전체 선택 checkbox 만들기 ***
<form action="" method='post'>
<fieldset>
<legend>취미</legend>
<input type="checkbox" id='selectAll' class='selectAll'><label> 전체선택</label>
<input type="checkbox" id='All' class='category'><label> 종합</label>
<input type="checkbox" id='novel' class='category'><label> 소설</label>
<input type="checkbox" id='essay' class='category'><label> 시/에세이</label>
<input type="checkbox" id='operation' class='category'><label> 경제/경영</label>
<input type="checkbox" id='seldev' class='category'><label> 자기계발</label>
<input type="checkbox" id='child' class='category'><label> 아동</label><br>
<input type="checkbox" id='travel' name='second' class='category'><label class='second'> 여행</label>
<input type="checkbox" id='science' name='second' class='category'><label class='second'> 과학</label>
<input type="checkbox" id='history' name='second' class='category'><label class='second'> 역사/문화</label>
<input type="checkbox" id='foreign' name='second' class='category'><label class='second'> 외국어</label>
<input type="checkbox" id='computer' name='second' class='category'><label class='second' id='computer'> 컴퓨터</label>
<input type="checkbox" id='cartoon' name='second' class='category'><label class='second' id='cartoon'> 만화</label>
</fieldset>
<script>
var selectAll = document.getElementById('selectAll');
selectAll.onclick = function(){
var selectAllChk = document.getElementById('selectAll');
var objs = document.querySelectorAll(".category");
for (var i = 0; i < objs.length; i++) {
objs[i].checked = selectAllChk.checked;
};
};
</script>
</form>==>selectAll변수에 아이디가 selectAll인 요소를 담아와서
selectAll이 클릭되면 함수가 실행된다.
함수 내용은
아이디가 selectAll인 태그의 요소를 selectAllChk에 담아줌
클래스명이 category인 요소들의 배열을 objs에 담아줌
objs배열안에 있는 해당 요소들 하나하나가 checked로 상태가 변경되게 한다
checked 값은 true false로 설정되는데 체크값과 똑같은 값으로 셋팅된다
즉, selecAllChk가 checked인지 확인하여 true이면 objs배열안에 있는 것도 true로 셋팅.
728x90
'[프론트엔드] > JavaScript' 카테고리의 다른 글
| [JavaScript] 전체 선택 기능 구현 (0) | 2022.04.24 |
|---|---|
| [JavaScript] 회원가입 폼 ( 필수 입력 이벤트, 정규식 ) (0) | 2022.04.23 |
| [JavaScript] #10_ 정규표현식 (0) | 2022.04.17 |
| [JavaScript] #09_ Event (0) | 2022.04.14 |
| [JavaScript] #08_ DOM (0) | 2022.04.14 |
'[프론트엔드]/JavaScript' Related Articles
more
Comments