📗id로 태그 선택하기
getElementById
document.getElementById('id');
const myTag = document.getElementById('myNumber');
console.log(myTag); // myNumber만약 존재하지 않는 태그를 선택하게 되면 null값이 리턴된다.
📗 class로 태그 선택하기
getElementByClassName
document.getElementByClassName('class');
const myTags = document.getElementByClassName('color-btn');
console.log(myTags);
console.log(myTags[1]);
console.log(myTags.length);
for (let tag of myTags) {
console.log(tag);
}요소들의 순서는 깊이와 상관없이 위에서부터 아래의 순서로 나온다. 클래스가 하나밖에 없는 요소에 접근하려고 해도 console.log(myTags[0]) 이렇게 해야한다. document.getElementByClassName('red') 이렇게 접근해도 그 요소가 속해있는 컬렉션 전체가 선택되기 때문이다.
getElementByClassName 으로 잘못된 클래스네임을 작성하면 null값이 아니라 빈 배열 컬렉션이 출력된다.
📕 유사배열(Array-Like Object)이란?
이름 그대로 배열과 유사한 객체를 유사 배열이라고 한다. 하지만 모양만 비슷하다고 해서 모두 유사 배열이라고 하진 않고 몇 가지 조건과 특징들이 있다.
1. 숫자 형태의 indexing이 가능하다.
유사 배열도 배열이라는 이름에 맞게 각 요소에 0부터 시작하는 숫자 형태의 indexr 있어야 한다.
2. length property가 있다.
객체가 가지고 있는 요소의 갯수를 저장하는 length property도 배열의 특징이라고 할 수 있는데, 유사 배열 역시 length property가 있어야 비로소 유사 배열이라고 할 수 있다. 숫자 형태의 index가 있더라도 length property가 없다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있다.
3. 배열의 기본 method를 사용할 수 없다.
상황에 따라서 직접 구현할 수도 있겠지만, 유사 배열이 완전한 배열이 아닌 가장 큰 이유는 기본적인 배열의 method를 사용할 수 없다는 점 때문이다. 배열의 method를 활용할 수 없다는 특징이 유사 배열을 활용하는 목적이 되기도 한다. indexing을 통해서 유사 배열의 요소에 접근하는 건 쉽지만 수정하거나 삭제하는 작업이 까다롭다. 그래서 내부의 요소들은 배열처럼 다룰 수 있게 하면서 배열의 method 사용을 막고 싶거나, 혹은 일반 배열에는 없는 특별한 method를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 한다.
4. Array.isArray(유사배열)은 false다.
Array 객체의 isArray method는 파라미터로 전달한 값이 배열인지 아닌지를 평가해서 그 결과를 boolean 형태의 값으로 리턴해주는 method이다.
유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 false이다.
❗️주의사항
유사 배열은 위의 특징들을 가진 대부분의 형태를 가리키는 포괄적인 개념이기 때문에 정말 다양한 형태로 존재할 수 있다. 예를 들어 HTMLCollection의 경우 for...of문을 활용하는 데 문제는 없었지만 어떤 유사배열의 경우에는 for...of문을 활용할 수 없는 경우도 있다.
배열의 기본 메소드를 사용할 수 없다고 했지만, 직접 구현해서 마치 배열처럼 사용할 수 있도록 만들 수도 있다. 하지만 직접 유사 배열을 만드는 게 아니라 이미 만들어진 유사 배열에 접근하는 경우에는 대부분 위 4가지 특징을 모두 가지고 있으니 잘 기억해두어야 한다.
