HTML 태그 선택하기

하나의 요소만 선택할 때

// 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 스타일링을 할 때도 태그 이름으로 스타일링을 하는 경우는 거의 없는것과 마찬가지로 명확한 의도가 없이 이렇게 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에 자바스크립트에서도 많이 사용되는 메소드는 아니다.