[JS] 도큐먼트 탐색 메소드 Document

도큐먼트 Document

Document 객체란 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 Document 객체의 수많은 속성과 메소드를 사용할 수 있다. 그 중 HTML 요소를 탐색하는 메소드를 알아보자.

document.querySelector

해당 메소드는 CSS 선택자로 선택되는 요소를 모두 선택한다. 이와 같이 거의 모든 CSS 선택자를 사용할 수 있다.

document.querySelectorAll("#아이디");
document.querySelectorAll(".클래스");

[CSS] 선택자 Selector

CSS 선택자 스타일 속성을 적용하는 요소를 선택자라고 한다. 선택자는 태그 하나가 될 수도 있고 각기 다른 태그 여러개를 묶어서 별도의 선택자로 지정할 수도 있다.

Hello

mintparc.tistory.com

document.getElementById

해당 메소드는 HTML의 id 속성을 탐색하여 선택한다.

document.getElementById("id명");

document.getElementsByName / document.getElementsByTagName

해당 메소드는 HTML에서 name 속성과 태그 이름을 모두 선택한다.

document.getElementsByName("name명");

document.getElementsByTagName("태그명");

getElementById 와 getElementsByName /getElementsByTagName 는 메소드명에서도 차이가 있다.

id는 유일한 선택자이기 때문에 하나만 선택되지만(Element), name과 태그 속성은 항상 여러 개가 선택되기 때문에 배열로 저장된다. (Elements)

829