3. css 선택자로 태그 선택하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>프로그래밍 언어</title>
</head>
<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>
</html>- css 선택자를 활용해서 태그를 선택하는 메소드는 document 객체의 querySelector와 querySelectorAll 두 가지가 있다.
- 하나의 요소를 선택할 때는 querySelecor를 사용하는데, querySelector('#아이디')는 getElementById('아이디')와 같은 결과를 리턴한다.
- 이때 querySelector 메소드를 활용하면 클래스나 태그 이름처럼 여러 개의 요소가 존재하는 선택자를 쓰더라도 그 중 가장 첫번째 요소 하나만 선택한다.
- 여러 개의 요소를 선택할 때는 querySelectorAll을 사용한다. 여러 개의 요소가 선택되기 때문에 NodeList라는 이름의 유사 배열에 각 요소가 담기게 된다.
- 이때 존재하지 않는 요소를 선택할 경우, undefined나 null값이 리턴되는 것이 아니라 그냥 비어있는 NodeList가 리턴된다.
- (getElementById와 동일하게 querySelector 메소드를 활용해 존재하지 않는 요소를 선택할 경우에는 null 값을 리턴한다.)
<li id="javascript" class="language">JavaScript</li>- console.log(document.querySelectorAll('.language')[0]); --> (O)
- language 클래스를 가진 태그들 중에서 0번 index를 선택하는 코드이다.
- console.log(document.querySelector('#list li')); --> (O)
- querySelector 메소드를 활용할 경우, 해당되는 요소가 여러 개 있더라도 가장 첫 번째 요소만 선택된다.
- 따라서 list id를 가진 요소의 자식 요소 중 가장 첫번째 li 태그를 선택하는 코드이다.
- console.log(documnet.querySelector('.language')); --> (O)
- querySelector 메소드에 class 선택자를 활용할 경우, 여러 개의 클래스를 가진 요소들이 있더라도 가장 첫 번째 요소만 선택된다.
- 따라서 language 클래스를 가진 요소들 중 가장 첫 번째 태그를 선택하는 코드이다.
- console.log(documnet.querySelectorAll('#javascript')); --> (X)
- css 선택자를 보면 javascript라는 id를 가진 요소를 찾고 있는데 querySelectorAll 메소드를 활용하고 있다.
- querySelectorAll 메소드를 활용할 경우 해당되는 요소가 하나 밖에 없더라도 요소가 하나인 NodeList를 반환한다.
4. getElement 방식 vs. querySelector 방식
- 둘 중 어느 방법을 사용해도 특별히 문제 될 것은 없지만, 메소드 이름 자체가 짧기도 하고 하나의 메소드로 유연하게 태그 선택이 가능하다는 점에서 조금 더 활용도가 높은 querySelector 사용이 추천된다.
- 다른 사람이 작성한 코드를 확인할 때를 대비해서 getElements를 통해 태그를 선택할 수 있다는 부분도 잊지 말고 꼭 기억해두자.
5. 총정리
1. 자바스크립트로 태그 선택하기
| 메소드 | 의미 | 결과 |
| document.getElementById('id') | HTML id속성으로 태그 선택하기 | id에 해당하는 태그 하나 |
| document.getElementsByClassName('class') | HTML class속성으로 태그 선택하기 | class에 해당하는 태그 모음(HTMLCollection) |
| document.getElementsByTagName('tag') | HTML 태그 이름으로 태그 선택하기 | tag에 해당하는 태그 모음(HTMLCollection) |
| document.querySelector('css') | css 선택자로 태그 선택하기 | css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 |
| document.querySelectorAll('css') | css 선택자로 태그 선택하기 | css 선택자에 해당하는 태그 모음(NodeList) |
2. 유사 배열이란?
- 배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...
특징
- 숫자 형태의 indexing이 가능하다.
- length 프로퍼티가 있다.
- 배열의 기본 메소드를 사용할 수 없다.
- Array.isArray(유사배열)의 리턴값은 false다.
3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러
- 이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...
- 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
- 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.
4. 이벤트 핸들러를 등록하는 2가지 방법
4-1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록하기
const btn = document.querySelector('#myBtn');
btn.onclick = function() {
console.log('Hello Codeit!');
};
4-2. HTML 태그의 onclick 속성에 바로 표시하기
<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>'~2023.02 > JS' 카테고리의 다른 글
| HTML 속성 다루기 예제 (0) | 2022.06.01 |
|---|---|
| 자바스크립트 요소 노드 추가하기 (0) | 2022.06.01 |
| 유사배열(Array-Like Object) (0) | 2022.06.01 |
| html/css_01 (0) | 2022.05.02 |
| 프로그래밍 기초 in JS_[토픽3]프로그래밍과 데이터 in JS_자료형 심화&과제로 복습하기 (0) | 2022.01.19 |