JavaScript_2(id,class로 태그 선택/유사배열)

✔️id로 태그 선택하기(getElementById)

const myTag1 = document.getElementById('myNumber');
console.log(myTag1);

const myTag2 = document.getElementById('btns');
console.log(myTag2);

getElementById : id값 불러옴

---

✔️class로 태그 선택하기(getElementsByClassName)

id는 고유한 값이기 때문에 하나의 태그를 선택할 때는 유용하지만 여러 요소들을 동시에 선택해야 하는 경우에는 활용하기가 조금 어렵다.

css에서 스타일링을 할 때도 여러 요소들의 스타일을 한꺼번에 다룰 때는 id가 아니라 class속성을 활용한다.

⭐class로 태그를 선택하는 메소드의 이름은 getElementsByClassName 한가지 주의해야 할 점은 여러 요소를 선택하는거니까 element가 아니고 elments! s가 붙는다는 점!⭐

const myTags1 = document.getElementsByClassName('color-btn');//변수 선언. 여러 요소 한번에 선택하는 메소드

console.log(myTags1);
console.log(myTags1[1]);
console.log(myTags1.length);

for (let tag of myTags1) {
	console.log(tag);
}

const myTag2 = document.getElementsByClassName('red');//red라는 하나밖에 없는 class 선택하더라도 HTMLCollection이 출력되기 때문에 이 태그를 선택하려면 0번 인덱스에 접근해야함.

console.log(myTags2);
console.log(myTags2[0]);

const myTags3 = document.getElementsByClassName('white');//존재하지 않는 값 선택하면 빈 HTMLCollection이 출력됨.

console.log(myTags3);
console.log(myTags3 === null);//false
console.log(myTags3.length);// 0
```![](https://velog.velcdn.com/images/kimhyesu-_-/post/87ec214c-54a7-489a-a254-eb833a27bb36/image.png)

지금까지 id와 class 속성을 이용해서 JavaScript로 HTML 태그를 선택하는 방법에 대해 알아봤는데요. document.getElementsByTagName('태그이름')메소드를 활용하면 태그 이름으로 태그를 선택할 수 있습니다.

const btns = document.getElementsByTagName('button');
//이렇게 하면 HTML 문서 내에 있는 모든 button 태그를 선택하게 됩니다.

document.getElementsByClassName('class')메소드와 마찬가지로
태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element(s), s가 있고, 실행결과 역시 HTMLCollection을 리턴한다는 점도 함께 기억해 두시면 좋을 것 같습니다.

const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*'); //전체에 적용

하지만, css 스타일링을 할 때도 태그 이름으로 스타일링을 하는 경우는 거의 없죠?

마찬가지로 명확한 의도가 없이 이렇게 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에 자바스크립트에서도 많이 사용되는 메소드는 아닙니다.

---

이전 시간에 잠깐 등장했던 HTMLCollection 기억나시나요? 배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부른다고 했었는데요.
당장은 직접 유사 배열을 만들어서 사용하게 될 일은 없겠지만, 지난 시간처럼 자바스크립트로 HTML 태그를 다룰 때 종종 마주치게 되니깐 간단하게나마 개념적인 부분은 정리하고 넘어갑시다!

✔️유사 배열(Array-Like Object)이란?

배열과 유사(類似)한 객체를 유사 배열, 영어로는 Array-Like Object라고 부릅니다.
하지만 마냥 모양만 비슷하다고 해서 모두 유사 배열이라고 부르진 않는데요. 유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있습니다.

1. 숫자 형태의 indexing이 가능하다.

배열은 각 요소에 0부터 순서대로 매겨진 index를 통해 요소끼리의 관계도 파악할 수 있고 그 index를 통해 요소에 접근할 수도 있다는 특징이 있죠?
유사 배열도 마찬가지로 배열이라는 이름에 걸맞게 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 합니다.

2. length 프로퍼티가 있다.

객체가 가지고 있는 요소의 갯수를 저장하는 length 프로퍼티도 역시 배열의 특징이라고 할 수 있는데요. 유사 배열 역시 length 프로퍼티가 있어야 비로소 유사 배열이라고 할 수 있습니다. 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있습니다.

3. 배열의 기본 메소드를 사용할 수 없다.

상황에 따라서 직접 구현할 수도 있겠지만, 유사 배열이 완전한 배열이 아닌 가장 큰 이유는 바로 기본적인 배열의 메소드를 사용할 수 없다는 점 때문입니다. 배열의 메소드를 활용할 수 없다는 특징이 유사 배열을 활용하는 목적이 되기도 하는데요. indexing을 통해 유사 배열의 요소에 접근하는 건 쉽지만 수정하거나 삭제하는 작업이 까다롭습니다.
그래서 내부의 요소들은 배열처럼 다룰 수 있게 하면서 배열의 메소드 사용을 막고 싶거나, 혹은 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 합니다!

4. Array.isArray(유사배열)은 false다.

Array 객체의 isArray 메소드는 파라미터로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 불린 형태의 값으로 리턴해주는 메소드입니다.
유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 결괏값이 false 입니다.

❗주의사항: 유사 배열은 다양하다!

유사 배열은 위의 특징들을 가진 대부분의 형태를 가리키는 포괄적인 개념이기 때문에 정말 다양한 형태로 존재할 수 있습니다.
예를 들어 지난 시간에 봤던 HTMLCollection의 경우 for..of 문을 활용하는 데 문제는 없었지만 어떤 유사 배열의 경우에는 for..of문을 활용할 수 없는 경우도 있습니다.
배열의 기본 메소드를 사용할 수 없다고 했지만, 직접 구현해서 마치 배열처럼 사용할 수 있도록 만들 수도 있습니다.
하지만 직접 유사 배열을 만드는 게 아니라 이미 만들어진 유사 배열에 접근하는 경우에는 대부분 위 4가지 특징을 모두 가지고 있으니깐 잘 기억해 두시면 좋을 것 같습니다 :)

---