// id태그 선택하기
document.getElementById('id');
*존재하지 않는 값을 출력할시에는 null
값이 리턴됨.
// class로 태그 선택하기
document.getElementsByClassName('class')
*배열의 형태로 출력된다. 하지만 배열을 다룰 때 사용하는 splice
나 push
같은 메소드는 사용할 수 없기 때문에 완벽히 배열이라고 부르기는 어렵다. 배열의 메소드는 사용할 수 없지만 대괄호 표기법으로 1번 인덱스에 접근한다거나 아니면 length
프로퍼티를 활용할 수도 있고 혹은 for...of
문을 사용하는 데는 아무런 문제가 없다.
*HTMLCollection에 들어가는 요소들의 순서는 HTML 태그에서 봤을 때 깊이와는 상관없이 무조건 위에서부터 차례대로이다.
*주의 getElementsByClassName
메소드를 사용해서 클래스가 하나밖에 없는 값에 접근하려고 하면 태그가 하나밖에 없으니까 딱 그 태그가 선택될 거라고 오해할 수도 있다. 하지만 하나밖에 없는 클래스를 선택하더라도 요소 한 개가 들어있는 HTMLCollection이 출력되기 때문에 태그를 선택하려면 인덱스에 접근해야 된다.
*존재하지 않는 클래스 값을 출력하시에는 Null값이 아니라 빈 HTMLCollection이 출력된다.
이렇게 여러 개의 값을 담고 있는 배열과 형태가 유사하지만 배열의 메소드는 사용할 수 없는 것들을 가리켜서 유사배열(Array-Like Object)이라고 부른다.
document.getElementsByTagName('button');
*이렇게 하면 HTML 문서 내에 있는 모든 button 태그를 선택하게 된다.
document.getElementsByClassName('class')
메소드와 마찬가지로 태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 메소드 이름에 Element(s)
, s가 있고, 실행결과 역시 HTMLCollection을 리턴한다.
document.getElementsByTagName('*');
*css 스타일링을 할 때도 태그 이름으로 스타일링을 하는 경우는 거의 없는것과 마찬가지로 명확한 의도가 없이 이렇게 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에 자바스크립트에서도 많이 사용되는 메소드는 아니다.