Javascript document - HTML 요소 선택 메소드

document

: HTML과 상호작용을 가능하게 해주고 브라우저에서 사용할 수 있는 객체

 

getElementbyId()

: document 함수, HTML에서 id 속성을 통해 element를 찾습니다. id는 한 HTML안에 중복될 수 없습니다.

만약 주어진 id와 일치하는 element가 없으면 null을 반환합니다.

 

document.getElementById(id);

 

 

getElementbyClassName()

: HTML에서 class 속성을 통해 element를 찾습니다.

배열을 반환합니다.

 

document.getElementByClassName(class);

 

 

getElementsByTagName()

: div, li, p 와 같은 특정 태그명을 통해 element 의 집합을 가져오는 함수입니다.

배열을 반환합니다.

 

document.getElementsByTagName(tagname);

 

 

getElementsByName()

: HTML에서 name 속성을 통해 element를 찾습니다.

 

document.getElementsByName(name);

 

 

document.querySelector()

: HTML에서, 지정한 선택자를 통해 첫번째 element를 찾습니다.

CSS selector 방식으로 검색합니다.

 

document.querySelector(선택자);

ex)
document.querySelector(#idname .classname h1);
// 해당하는 첫번째 h1을 찾음

 

 

document.querySelectorAll()

: HTML에서, 지정한 선택자를 통해 모든 element를 찾습니다.

CSS selector 방식으로 검색합니다.

배열을 반환합니다.

 

document.querySelectorAll(선택자);

ex)
document.querySelectorAll(#idname .classname h1);
// 해당하는 모든 h1을 찾음