자바스크립트 (JavaScript) - 50 : 문서 객체 가져오기 (getElementById, getElementsByName, getElementsByTagName, querySelector, querySelectorAll)

- 문서 객체 가져오기

1) 다음은 document 객체의 문서 객체 선택 메서드를 정리한 표이다.

메서드 이름	설명
getElementById(id)	id와 일치하는 문서 객체를 가져온다.
getElementsByName(name)	name이 일치하는 문서 객체들을 배열로 가져온다.
getElementsByTagName(tagName)	tagName이 일치하는 문서 객체를 배열로 가져온다.
querySelector(선택자)	선택자로 가장 처음 선택되는 문서 객체를 가져온다.
querySelectorAll(선택자)	선택자로 선택되는 문서 객체를 배열로 가져온다.

2) getElementById()

id로 문서의 객체를 가져오는 메서드이다.

id가 중복되는 경우, 자바스크립트는 처음 만나는 id 객체를 가져오지만, 스타일의 경우 모두 적용 시킨다.

3) getElementsByTagName(), getElementsByName()

이름에서 알 수 있듯이, 문서 객체를 유사 배열 객체로 가지고 온다.

유사 배열 객체는 실제로는 객체이지만 마치 배열처럼 접근할 수 있는 객체를 말한다.

따라서 Array.isArray()의 결과는 false가 return되고, 다른 속성들이 붙기 때문에 for in 반복문을 사용하면 안된다.

다음은 h1 태그을 가지는 문서 객체들을 모두 가져와 문자열을 변경하는 예제이다.

4) querySelector(), querySelectorAll()

이는 CSS 선택자로 문자 객체를 선택하는 메서드이다. querySelector()는 해당 선택자를 찾으면 검색을 멈추고 그 요소 객체를 return한다.

querySelectorAll()은 해당 선택자로 선택되는 문자 유사 배열 객체로 가져온다.

다음은 querySelector()와 querySelectorAll() 메서드를 테스트한 예제이다.

hObject에는 첫 번째 header 객체가 return되고, hObjects에는 id가 header인 모든 객체가 유사 배열 형태로 return된다.