18.4. get 메서드

DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메서드가 있습니다.

가장 먼저 설명할 것은 document.getElementById 입니다.
모든 HTML 요소는 고유한 ID를 할당받을 수 있습니다.
document.getElementById는 ID를 이용해 요소를 찾습니다.

document.getElementById('content');     // <div id="content">...</div>

CAUTION_
브라우저는 ID가 중복되어도 경고하지 않으므로 HTML 유효성 검사기 등을 통해 유일한 ID를 사용해야 합니다.
웹 페이지는 점점 복잡해지고 여러 소스에서 구성요소를 가져오는 일이 많으므로 ID의 중복을 피하는 일이 점점 어려워지고 있습니다.
따라서 ID를 사용할 때는 주의 깊게, 남용하지 않도록 해야 합니다.

document.getElementsByClassName는 주어진 클래스 이름에 해당하는 요소들을 반환합니다.

const callouts = document.getElementsByClassName('callout');

document.getElementsByTagName는 주어진 태그 이름에 해당하는 요소들을 반환합니다.

const paragraphs = document.getElementsByTagName('p');

CAUTION_
DOM 메서드가 반환하는 컬렉션은 자바스크립트 배열이 아니라 HTMLCollection의 인스턴스로, 배열 비슷한 객체입니다.
이 컬렉션에 for 루프를 사용할 수는 있지만, map, filter, reduce 같은 Array.prototype 메서드는 사용할 수 없습니다.
[...document.getElementsByTagName(p)]처럼 확산 연산자를 써서 HTMLCollection을 배열로 바꿀 수 있습니다.