[JavaScript] 태그 선택하기, 유사 배열

HTML id로 태그 선택

// id에 해당하는 태그 하나 출력
document.getElementById('id');

※ getElementById를 통해서 존재하지 않는 id 값으로 태그를 선택하면, null값이 리턴된다.

- 원리: 메소드의 파라미터로 접근하고자 하는 태그의 id 값을 문자열로 전달해 주면 해당되는 태그가 선택
- 사용: 자바스크립트로 딱 하나만의 요소를 선택할 때, html 태그에 id 속성을 부여하고 getElementById 메소드 활용
- 장점: id 속성을 활용하면 필요한 태그를 명확하게 선택할 수 있다는 장점이 있음
- 단점: 여러 요소들을 동시에 선택해야 하는 경우 활용하기 어려움

HTML class로 태그 선택

// class에 해당하는 태그 모음(HTMLCollection) 출력
const myTags = document.getElementsByclassName('class');  // 여러 요소들을 선택하므로 Elements

※ getElementsByclassName으로 존재하지 않는 클래스 값을 찾게되면 null 값이 아닌 빈 HTMLCollection이 출력된다.

console.log(myTags === null); // false console.log(myTags.length); // 0

※ 하나밖에 없는 클래스를 선택하더라도 요소 1개가 들어있는 HTMLCollection이 출력되므로, 해당 태그를 선택하려면 0번 인덱스에 접근해야 한다.

console.log(myTags[0]);

 

HTML 태그 이름으로 태그 선택

명확한 의도 없이 많은 요소들을 한꺼번에 다루게 될 수도 있어서 많이 사용되는 메소드는 아님

// tag에 해당하는 태그 모음(HTMLCollection) 출력
document.getElementsByTagName('tag');

 

CSS 선택자로 태그 선택

다른 메소드보다 querySelector 활용↑(메소드 이름이 짧기도 하고, 하나의 메소드로 유연하게 태그 선택이 가능하므로)

// 하나의 요소 선택할 때, 
querySelector document.querySelector('css'); 

// css 선택자에 해당하는 태그 중 가장 첫번째 태그 출력 
document.querySelector('#id');
document.getElementById('id'); 

// 위와 동일한 결과 출력
document.querySelector('.class'); // 클래스 요소들 중 가장 첫번째 요소 출력 

// 여러 개의 요소 선택할 때, 
querySelectorAll document.querySelectorAll('.class'); 

// css선택자에 해당하는 태그 모음(NodeList 유사배열) 출력 
document.getElementsByClassName('class'); // 위와 비슷, HTML Collection 출력

 

유사배열(Array-Like Object)

배열과 유사한 객체
- 여러 개의 값을 담고 있는 배열과 형태는 유사하지만 배열의 형태는 사용할 수 없음
- 유사배열은 태그의 깊이와는 상관없이 무조건 위에서부터 차례대로 실행된다.

ex) HTMLCollection, NodeList, DOMTokenList ...

1. 숫자 형태의 indexing이 가능하다. (0부터 시작하는 숫자 형태의 index)
2. length 프로퍼티가 있다. (length 프로퍼티가 없다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적인 객체..)
3. 배열 메소드를 활용할 수는 없음 (완전한 배열이 아니므로)
4. Array.isArray(유사배열) = false

- Array객체의 isArray(): 파라미터로 전달한 값이 배열인지 아닌지 불린 값으로 리턴해주는 메소드