getElementbyId, querySelector(), querySelectorAll()

 

 

getElementbyId

태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수

 

사용법 : document.getElementById(id); 에 해당 element의 id를 넣음으로 사용

 

반환값

주어진 id와 일치하는 dom 요소를 나타내는 Element 객체를 반환하거나 주어진 id와 일치하는 dom 요소가 없으면 null을 return

 

 

querySelector()

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

 

사용법 : document.querySelector(id); 에 해당 element의 id를 넣음으로 사용

 

ex)

document.querySelector("p");

document.querySelector(" .ginger ");

document.querySelector("#aaa");

 

매개변수로 "p" 를 줬을 때는, HTML에서 <p>태그를 가진 요소들 중에 가장 첫 번째 노드를 리턴한다. 클래스 이름을 통해 찾고 싶을 때는 ".ginger" 와 같이 . 을 붙여준다. id를 통해 찾을 때는 # 을 붙여준다. 

 

 

querySelectorAll()

querySelector()가 한 개의 요소를 반환했다면, querySelectorAll()은 주어진 CSS 선택자와 일치하는 모든 요소를 반환한다. 이때, 반환 타입은 리스트 타입이다. 따라서 인덱스를 통해 조작할 수 있다.

 

사용법 : document.querySelectorAll();

 

test를 가진 <p> 태그가 3개 있다. JavaScript에서 querySelectorAll(".test")를 통해 3개의 요소를 test 변수에 저장한다. 그럼 test변수는 마치 다른 언어의 배열과 같은(하지만 배열과는 다르다.) 역할을 한다. test[i]와 같이 인덱스를 통해 원하는 요소에 접근할 수 있고 length라는 속성도 제공되고 있다.

 

 

Document.querySelectorAll()는 요소를 배열형태로 받아오기 때문에 index를 이용하여 특정 요소를 선택하는 것이 가능하다.

let a = document.querySelectorAll(".txt");

function textColorChange() {
  for (var i = 0; i < a.length; i++) {
    a[i].style.color = "red";
  }
}

 

 

 

 

 

 

 

참고 : https://kyounghwan01.github.io/blog/JS/JSbasic/getElementById/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8

https://gingerkang.tistory.com/49