DOM 요소에 접근하는 방법에는 다양한 방법이 있습니다.
단, 요소 노드에 대해서만 쿼리 할 수 있습니다.
document.body // <body> 요소 노드를 선택합니다.
document.head // <head> 요소 노드를 선택합니다.
document.documentElement // <html> 요소 노드를 선택합니다.
쿼리 메서드
특수한 프로퍼티로 문서의 일부를 선택합니다.
document.querySelector( CSS 선택자 );
모든 CSS 선택자(class, id 등)를 사용하여 DOM에서 처음 일치하는 요소를 반환합니다.
id의 경우 () 안에 #id명을, class의 경우 <> 안에 .class명을 입력해주시면 됩니다.
만약 일치하는 요소를 찾을 수 없는 경우에는 null을 반환합니다.
Document.querySelector() - Web API | MDN
**Document.querySelector()**는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
document.getElementById( id명 );
id를 가져와 해당 id를 가진 요소를 반환하며, 동일한 id가 html 문서에서 두 번 이상 발생하지 않으므로 항상 하나의 요소를 반환합니다.
만약 지정된 id를 가진 요소를 찾을 수 없는 경우 null을 반환합니다.
Document.getElementById() - Web API | MDN
Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을
developer.mozilla.org
document.querySelectorAll( CSS 선택자 );
모든 CSS 선택자를 사용하여 DOM에서 일치하는 모든 요소를 정적 NodeList로 반환합니다.
만약 일치하는 요소를 찾을 수 없으면 빈 NodeList를 반환합니다.
Document.querySelectorAll() - Web API | MDN
Document 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다.
developer.mozilla.org
document.getElementsByClassName( class명 );
class를 가져와 DOM에서 일치하는 요소의 라이브 HTMLCollection을 반환합니다.
일치하는 요소를 찾을 수 없으면 빈 HTMLCollection을 반환합니다.
document.getElementsByTagName( HTML 태그 );
HTML 태그를 가져와 DOM에서 일치하는 요소의 라이브 HTMLCollection을 반환합니다.
일치하는 요소를 찾을 수 없으면 빈 HTMLCollection을 반환합니다.
Element.getElementsByTagName() - Web API | MDN
Element.getElementsByTagName() 메서드는 제공된 태그 네임(tag name)을 가지는 엘리먼트의 유효한 HTML 컬랙션를 반환합니다. 엘리먼트가 특정된 범위를 검색하는 경우, 그 자신의 엘리먼트는 제외하고, 특
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
| DOM 트래버싱(Traversing the DOM) (0) | 2022.08.25 |
|---|---|
| 속성(Attribute)과 프로퍼티(Propertie) (0) | 2022.08.24 |
| 노드(Node)와 요소(Element) (0) | 2022.08.23 |
| Call Back 함수 (0) | 2022.08.21 |
| 스프레드 연산자(Spread Operator)와 REST 매개변수 (0) | 2022.08.21 |
