안녕하세요, 지난 시간까지 Javascript의 얕은 이론(?)을 정리하였고 이제부터 본격적으로 Web을 만드는데 필요한 HTML/CSS와의 연결에 대해서 정리하려 합니다. 오늘은 Javascript에서 CSS 선택자를 선택하는 방법을 정리해보겠습니다.
CSS의 선택자를 선택하기 위해서는 document객체의 내장 API들을 사용해야 합니다.
-. document.getElementById('id를 문자열로 표현') : id 속성을 이용하여 태그를 선택하고자 할 때 사용.
HTML 문서에 존재하지 않는 id값으로 태그를 선택하면 null이 리턴됩니다.
-. document.getElementsByClassName('class를 문자열로 표현') : class 속성을 이용하여 태그를 선택하고자 할 때 사용.
같은 class를 가진 요소가 여려 개라면 전부 선택이 가능합니다. getElementsByClassName 메소드로 태그를 선택할 시 해당되는 클래스를 가진 각 요소가 HTMLCollection이라는 배열과 비슷한 유사 배열에 담기게 됩니다. 유사 배열이므로 배열이 가진 메소드는 사용이 불가능합니다. 배열의 인덱스 기능은 유지됩니다. 존재하지 않는 class값으로 태그를 선택하면 null이 아닌 빈 HTMLCollection이 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>풋살 동아리</title>
</head>
<body>
<h2 id="title">회원 명단</h2>
<ul id="members">
<li class="member">강영혼</li>
<li class="member">박민황</li>
<li class="member">김효중</li>
<li class="member">최지운</li>
<li class="member">손서욱</li>
<li class="member">이일준</li>
<li class="member">김소위</li>
</ul>
<script src="index.js"></script>
</body>
</html>
<!-- JS -->
const members = document.getElementsByClassName('member');
for (let i = 1; i < members.length; i++) {
if (i % 2 == 0) {
console.log(members[i]);
}
}
// 짝수 인덱스의 member class 출력된다!
<li class="member">김효중</li>
<li class="member">손서욱</li>
<li class="member">김소위</li>
-. document.
querySelector
('#id or .class') : 하나의 요소를 선택하고자 할 때 사용. (하나의 요소를 선택하는 것이므로 id를 선택할 때 사용하는 게 좋다고 저는 생각합니다!) id를 선택하고자 할 때는 '#id 이름', class를 선택하고자 할 때는 '.class'를 사용합니다. 즉 querySelector('#ID')는 getElememtByID('ID')와 동일한 결과를 리턴합니다. querySelector 메소드를 활용할 때 class나 태그 이름처럼 여러 개의 요소가 존재하는 선택자를 쓰더라도 가장 첫 번째 요소 하나만 선택합니다. 존재하지 않는 요소를 선택할 경우 null을 리턴합니다.
여러 개의 요소를 선택할 때는 document.querySelectorAll('#id or .class')을 사용합니다. class와 비슷하게 NodeList라는 유사 배열에 각 요소들이 담기게 됩니다. getElememtsByClassName과 마찬가지로 존재하지 않는 요소를 선택할 경우 비어있는 NodeList가 리턴됩니다.
가장 많이 사용하는 것은 querySelector와 querySelectorAll이므로 두 개를 아래 예시를 통해 추가로 확인해보겠습니다.
// HTML 코드
<body>
<h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
<ol id="list">
<li id="javaScript" class="language">JavaScript</li>
<li id="python" class="language">Python</li>
<li id="java" class="language">Java</li>
<li id="c" class="language">C</li>
<li id="ruby" class="language">Ruby</li>
</ol>
<script src="index.js"></script>
</body>
//JS Code
//<li id="javaScript" class="language">JavaScript</li> 만 출력되게 하려면?
console.log(document.querySelector('#javaScript')) //querySelector 사용
console.log(document.querySelectorAll('language')[0]) //유사배열의 인덱스 속성을 사용
console.log(document.querySelector('.language')) // querySelector는 동일한 class가 여러개면 첫번째 것을 끌어온다
console.log(document.querySelector('#list li')) // #list 클래스 내부에서 첫번째 li이므로!
마치기 전에, 위에서 설명드린 유사 배열의 특징 및 웹에서 발생하는 이벤트에 대해 간단히 정리하려 합니다!
유사 배열 : 배열과 유사한 객체 (HTMLCollection, NodeList, DOMTokenList ...)
-. 인덱싱이 가능합니다.
-. length 프로퍼티가 있습니다.
-. 배열의 기본 메소드를 사용할 수 없습니다.
이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들입니다. (스크롤, 클릭, 키보드 입력...)
-. 이벤트 핸들링 : 자바스크립트를 이용해 이벤트를 다루는 일
-. 이벤트 핸들러(이벤트 리스터) : 이벤트가 발생하였을 때 일어나야 하는 동작들을 표현한 코드
이벤트 핸들러 등록하는 방법
→ 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기
const btn = document.querySelector('#myBtn'); // btn을 찾는다
// btn.onclick = alert('Hello World!)로 하면 이벤트 발생할 때가 아니라 바로 호출된다
// function()안에 넣어 click이 발생할때 호출되게 한다!
btn.onclick = function() {
alert('Hello World!');
};
→ HTML 태그의 onclick 속성에 바로 표시 (비추천!)
'Web 개발 > JS' 카테고리의 다른 글
| Javascript - innerHTML, outerHTML, textContent (0) | 2021.06.27 |
|---|---|
| Javascript - DOM (0) | 2021.06.26 |
| Javascript - array(Quiz) (0) | 2021.06.22 |
| Javascript - array (0) | 2021.06.21 |
| Javascript - class(1) (0) | 2021.06.19 |
댓글