<JavaScript로 HTML 태그 선택하기>
1. id 속성을 통한 태그 선택
document.getElementById('id')
- id에 해당하는 태그 하나를 선택한다.
- document : 자바스크립트에서 미리 만들어져있는 객체
- getElementById 메소드 의미 : Id 속성을 통해 요소(element)를 가져온다.
- getElementById 메소드의 파라미터로 접근하고자 하는 태그의 id를 문자열로 전달한다.
- cf. 파라미터로 존재하지 않는 태그를 입력하면 null이 리턴된다. (undefined X)
2. class 속성을 통한 태그 선택
document.getElementsByClassName('class')
- 하나의 요소만 선택하는 id 속성과는 달리, class 속성은 여러 요소를 택하므로 Elements(복수형)임에 유의한다.
- 콘솔에 출력하면 해당 클래스의 모든 태그들이 대괄호로 감싸져 HTMLCollection이라는 유사 배열의 형태로 나타난다. (배열은 X)
- cf. 유사 배열(Array-Like Object) : 배열과 형태는 유사하지만 완벽하게 배열은 아닌 것으로서, 대부분 배열의 메소드 사용은 불가하지만 인덱싱과 length 프로퍼티 사용은 가능하다.
- 존재하지 않는 class 값으로 태그를 선택하면 빈 HTMLCollection이 출력된다. (null X)
3. HTML 태그 이름을 통한 태그 선택
document.getElementsByTagName('tag')
- tag에 해당하는 태그들이 HTMLCollection이라는 유사 배열의 형태로 나타난다.
4. css 선택자를 통한 태그 선택
document.querySelector('css')
- 파라미터로 존재하지 않는 태그를 입력하면 null이 리턴된다.
- 주의) querySelector 메소드를 활용하여 class를 선택하면 해당 클래스의 태그들 중 첫 번째 요소만 선택된다. 따라서 여러 요소를 선택하고 싶다면 아래와 같이 querySelectorAll 메소드를 활용한다.
document.querySelectorAll('css')
- querySelectorAll 메소드를 활용하면 NodeList라는 유사 배열이 출력된다. getElementsByClassName 메소드를 통해 HTMLCollection을 출력했을 때와 동일한 요소로 구성된다.
- 해당되는 요소가 하나밖에 없더라도 해당 요소가 출력되는 것이 아닌, 요소가 하나인 NodeList가 출력됨에 유의한다.
- 존재하지 않는 요소를 선택할 경우 빈 NodeList가 리턴된다. (null X)
