DOM을 다루기 전에 기본적으로 태그를 선택해오는 방법이 중요하다고 생각한다. 오늘은 HTMLCollection에 대해서 자세히 공부해 볼것이다.
javascript에서 태그를 선택하는 방법에는 여러가지가 있다.
그중 먼저 id로 태그를 선택하는 법과 class로 태그를 선택하는 방법에 대해서 복습을 했다.
getElementById
- id는 html 코드 전체에서 다른 태그와 구분을 하기 위해 고유한 값에 붙이는 태그이다.
- id 속성을 활용하면 원하는 태그를 명확하게 선택할 수 있는 장점이 있다.
- 딱 1개의 요소를 선택해야 될 때 id속성을 활용할 수 있다.
getElementsByClassName
- id는 고유한 값이기 때문에 하나의 태그를 선택할 때는 유리하지만, 여러 요소들을 동시에 다뤄야 할 때는 활용하기 어렵다.
- class는 여러 태그를 한번에 선택할 때 활용한다.
- getElementsByClassName을 통해 태그를 선택하게되면, HTMLCollection이라는 배열 안에 선택한 클래스들이 담겨서 나온다.
HTMLCollection[ ]은 여러 개의 값을 담고 있는 배열과 유사하지만, 배열의 메소드는 사용할 수 없기 때문에 이러한 배열을 가리켜 유사배열(Array Like Object)이라고 한다.
getElementsByClassName을 통해 태그들의 값을 담아올 때 태그가 담기는 순서는 깊이와는 상관없이 코드의 위에줄부터 HTMLCollection에 담긴다.
document에 접근해서 값을 가져와보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tag selector exam</title>
<link rel="stylesheet" href="index01.css" />
</head>
<body>
<header id="header">I'm Header!</header>
<div>
<button class="btn">button1</button>
<button class="btn">button2</button>
</div>
<div id="btn-section">
<div class="cr-btn darksalmon"></div>
<div class="cr-btn lightcoral"></div>
<div class="cr-btn indianred"></div>
<div class="cr-btn plum"></div>
<div class="cr-btn violet"></div>
<div class="cr-btn slateblue"></div>
<div class="cr-btn royalblue"></div>
<div class="cr-btn cornflowerblue"></div>
</div>
<script src="index01.js"></script>
</body>
</html>document.getElementBy를 통해 값을 다루기 위해 html 파일을 한 작성해보았다.
console.log(document.getElementById("header"));
header라는 아이디를 갖고오면, 해당 아이디를 갖고 있는 태그의 전체를 가져올 수 있다.
console.log(document.getElementsByClassName("btn")); class로 정의된 버튼 2개를 가져와 보았다. class를 가져오면 HTMLCollection[ ]에 담겨서 값이 나온다.
그리고 만약 존재하지 않는 태그를 선택할 시 null이 리턴된다.
console.log(document.getElementById("haha"));
let btns = document.getElementsByClassName("color-btn");
여러 class들을 가져오기 위해서 셀렉터를 통해 가져온 값을 변수에 담아보았다.
배열처럼 인덱스를 통해 해당 요소에 접근할 수 있다.
console.log(btns[2]);
또, 길이를 구하거나 반복문을 통해 해당 요소들을 다룰 수 있다.
for (let btn of btns) {
console.log(btn);
}console.log(btns.length);
그리고 동일한 클래스명 없이 자기 자신만이 가진 클래스로 값을 가져왔을 때, 해당하는 태그의 값을 가져올 것 같지만, HTMLCollection에 요소 1개를 가진 채 값이 출력된다.
console.log(document.getElementsByClassName("lightcoral"));
존재하지 않는 클래스 값을 찾게되면, 빈 HTMLCollection이 출력된다.
console.log(document.getElementsByClassName("qwert"));
console.log(document.getElementsByClassName("qwert") === null); //false
console.log(document.getElementsByClassName("qwert").length); //0이 출력된다.
