[JS] querySelector

 

 

 

 

자바스크립트로 태그 선택하기

 

 

메소드	의미	결과
document.getElementById('id')	html id 속성으로 태그 선택	id에 해당하는 태그하나
document.getElementByClassName('class')	html class 속성으로 태그 선택	class에 해당하는 tag
document.getElementByTagName('tag')	html tag name으로 태그 선택	tag에 해당하는 태그모음
document.querySelector('css')	css선택자로 태그 선택	css선택자에 해당하는 태그 중 첫번째 태그
document.querySelectorAll('css')	css선택자로 태그 선택	css선택자에 해당하는 태그 모음

 

 

 

getElementById

 > id로 태그 선택

  id : html에서 다른태그들과 구분위해 붙여주는 고유한 값.

  ( document라는 객체의 getElemnetById라는 메소드)

//해당 idname의 요소를 가져오겠다는 의미
const myTag = document.getElementById ('idname');

 * 존재하지않는 id선택하면 null값 출력.

 

 

 

 

---

 

 

getElementsByClassName

> class로 태그 선택

 

const myTags = document.getElementsByClassName('classname')[0];

 

유사배열 출력 (완벽하지 않은 배열 ) array-like object

   : 대괄호 표기법으로 인덱스접근 가능, length프로퍼티 활용, for..of문 동작 (유사배열의 특징)

   : splice나 push같은 메소드 사용불가           

   : 요소순서는 위에서부터 차례대로

   : 하나만있는 클래스에 접근하려고해도 0번 인덱스로 접근해야됨.         

   : Array.isArray > false (파라미터로 전달한 값이 배열인지 아닌지 평가하는 메소드)

  *존재하지않는 class선택하면 빈 클래스 출력.  

 

 

 

---

 

 

getElementsByTagName

> 태그이름으로 태그 선택하기

 

document.getElementsByTagName('tagname')

//ex
const btns = document.getElementsByTagName('button');

 

 

 

---

 

 

querySelector(All)

> css선택자로 태그 선택

 

//동일 코드
const myTag = document.querySelector('#myNumber')
const myTag = document.getElementById('myNumber')


const myTag = document.querySelector ('.color-btn')          //class중 젤 첫번째 요소선택
const myTag = document.querySelectorAll ('.color-btn')       //해당클래스 모든요소선택
const myTag = document.getElementByClassName ('color-btn')   //위와 동일

 

> 좀더 짧고 간결한 query권장

* 존재하지않는 요소 선택시

  querySelector > null

  querySelectorAll > 비어있는 NodeList 리턴

 

 

 

> 입력값 원할때 

  const password = document.querySelector ('password').value;