[JavaScript] HTML 노드 객체 가져오기 📝

1. id 속성으로 노드 가져오기

document.getElementById("id 이름");

 

2. 요소의 이름으로 노드 가져오기

document.getElementsByTagName("태그명");

Elements (복수형)임에 주의!

getElementsByTagName 메서드는 NodeList 객체를 반환

 

HTML 문서 안의 모든 태그 요소를 담아서 반환할 때에는 *를 사용해준다.

let allElements = document.getElementsByTagName("*");

 

3.  class 속성 값으로 노드 가져오기

document.getElementsByClassName("클래스 이름");

특정 class 속성 값을 가지는 요소들을 NodeList 객체로 반환

 

4.  name 속성 값으로 노드 가져오기

document.getElementsByName("name 이름");

 

 

5. CSS 선택자로 노드 가져오기

document.querySelectorAll("선택자");

 

document.querySelector("선택자");

지정한 선택자와 일치하는 요소 객체 중 첫 번째에 위치해 있는 요소 객체를 반환

 

6. Document 객체의 프로퍼티

document.documentElement	문서의 루트 요소(html) 객체의 참조
document.head	문서의 head 요소 객체의 참조
document.body	문서의 body 요소 객체의 참조
document.forms[]	문서 안의 form 요소 객체의 참조를 저장한 유사 배열 객체
document.images[]	문서 안의 images 요소 객체의 참조를 저장한 유사 배열 객체
document.anchors[]	문서 안의 anchors 요소 객체의 참조를 저장한 유사 배열 객체
document.applets[]	문서 안의 applets 요소 객체의 참조를 저장한 유사 배열 객체
document.links[]	문서 안의 links 요소 객체의 참조를 저장한 유사 배열 객체
document.embeds[]	문서 안의 embeds 요소 객체의 참조를 저장한 유사 배열 객체
document.plugins[]	문서 안의 plugins 요소 객체의 참조를 저장한 유사 배열 객체
document.scripts[]	문서 안의 scripts 요소 객체의 참조를 저장한 유사 배열 객체

표 출처: 모던 자바스크립트 입문

 

 

 

 

본 내용은 "모던 자바스크립트 입문" 참고하여 정리함.