querySelecotor() / querySelectorAll() / getElementById / hetElementByClassName

pjh1011409·2022년 1월 12일
0

JS

목록 보기
1/31
post-thumbnail

노마드코더의 크롬앱 만들기

Login

querySelector() / querySelectorAll /

getElementById / getElementByClassName

  1. getElementById()
    • Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다.
      ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.
    • ID가 없는 요소에 접근하려면 Document.querySelector()를 사용하세요. 모든 선택자 (en-US)를 사용할 수 있습니다.

  1. getElementByClassName()

HTML = class / JS = classname

  • getElementsByClassName() 은 컬렉션 객체를 반환합니다.
  • 인자로 전달된 값에 해당되는 클래스 네임을 갖고 있는 객체들을 조회해서 유사 배열에 담는 메소드이다.
  • 따라서 for문을 사용하거나 특정 index에 위치한 element를 반환받아 사용할 수 있습니다.

3.querySelecotor()

document.querySelector() 는 입력한 선택자와 일치하는 문서 내의 첫 번째 element를 반환합니다. 일치하는 요소가 없다면 null을 반환하고 괄호 안에 들어가는 매개변수는 유효한 CSS 선택자입니다.

4.querySelectorAll()

  • querySelector()가 한 개의 요소를 반환했다면, querySelectorAll()은 주어진 CSS 선택자와 일치하는 모든 요소를 반환한다. 이때, 반환 타입은 리스트 타입이다. 따라서 인덱스를 통해 조작할 수 있다.
  • querySelector와 사용 방법은 동일하며 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환합니다. 반환객체가 nodeList이기에 for문 또는 forEach문을 사용합니다.
    ex) querySelectorAll("#id, .class");

getElementById vs querySelector()

profile
나만의 것을 만들고 싶은 사람, will be a FE developer

0개의 댓글