[JS] 노드 객체 가져오기

 

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

id 속성 값은 문서에서 유일한 값이어야 합니다.

document.getElementById(id값);

 

02. 태그 이름으로 노드 가져오기

 

공백 문자의 영향을 받습니다. Elements 부분이 복수형이라는 점에 주목하세요. 

NodeList 객체를 반환합니다.

document.getElementsByTagName("요소의 태그 이름");

* NodeList 객체는 '살아있는 상태'를 가리킵니다. 즉, 이 객체느느 특정 시점의 정적인 상태를 표현하는 것이 아니라 HTML 문서의 변화에 따라 동적으로 바뀝니다.

 

 

반응형

 

03. Class 속성 값으로 노드 가져오기 

 

document.getElementsByClassName("class의 이름");

 

04. Name 속성 값으로 노드 가져오기 

 

document.getElementsByName("name 속성 값");

 

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

 

document.querySelectorAll("선택자");

* querySelectorAll 메서드가 반환하는 NodeList는 '살아있는 상태'가 아닙니다. NodeList에 포함된 요소는 메서드를 호출한 시점에 일치한 요소입니다. HTML 문서의 내용이 바뀌어도 querySelectorAll 메서드가 반환한 NodeList는 바뀌지 않습니다. 

 

가상클래스는 CSS 선택자로 사용 할 수 없습니다. 

querySelectorAll 과 querySelector 메서드는 :first-line, :first-letter, :link, :visited 등의 의사 선택자를 지원 하지 않습니다.

 

 

 

==== Reference====

📌 모던 자바스크립트 입문 책