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

id로 태그 선택하기

 

자바스크립트로 딱 하나의 요소를 선택하고 싶을때 -> id 를 활용한다. 

(id 속성값은 중복이 되지 않으므로 =고유한 값이므로 명확하게 접근할 수 있다) 

 

document.getElementById(' id ') 

document라는 객체의 get ~ Id 라는 메소드를 사용한다

html에서 지정한 id를 변수로 받는다 

접근하고자 하는 태그의 요소에 접근할 수 있다

 

const myTag = document.getElementById(' id ') ; 

console.log(myTag);

이런 식으로 변수에 할당하고 출력할 수 있다 

 

존재하지 않는 태그를 선택하면 -> null로 출력된다

---

class 로 태그 선택하기 : 여러 요소를 동시에 선택해야 할 때

 

document.getElementsByClassName(' class')

=> 배열의 형식 HTML Collection [  ]으로 출력된다. (배열은 아님)  = > '유사배열' Array-Like Object 이라고 부른다

⭕대괄호 접근법이나 .length 프로퍼티, for ... of 문 사용 가능

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

 

출력되는 순서는 html 코드 내의 순서에만 영향을 받는다. (깊이에는 영향x)

단 한 개만 있는 class 를 파라미터로 입력하더라도 HTML Collection [  ] 으로 출력되므로 [0]번 인덱스로 접근해야한다.

 

존재하지 않는 태그를 선택하면 -> 빈 HTML Collection []이 출력되고, [0]번 인덱스 값은 undefined 로 반환됨

---

참조.

document.getElementsByTagName('태그이름')

---

CSS 선택자로 태그 선택하기

document.querySelector('css 선택자')

동일 메소드로 #id 또는 .class , 태그 이름, 자식요소 ... 등 을 넣어서 태그를 선택할 수 있다. 

제일 위에 있는 1개 태그만 출력됨 

 

document.querySelectorAll('css 선택자')

=> Node collection []으로 출력됨

 

존재하지 않는 태그를 선택하면 -> 빈 Node Collection []이 출력

---