[JavaScript] 태그 선택하기

 

메소드	의미	결과
document.getElementById('id')	HTML id속성으로 태그 선택하기	id에 해당하는 태그 하나
document.getElementsByClassName('class')	HTML class속성으로 태그 선택하기	class에 해당하는 태그 모음(HTMLCollection)
document.getElementsByTagName('tag')	HTML 태그 이름으로 태그 선택하기	tag에 해당하는 태그 모음(HTMLCollection)
document.querySelector('css')	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
document.querySelectorAll('css')	css 선택자로 태그 선택하기	css 선택자에 해당하는 태그 모음(NodeList)

 

1. id로 태그 선택하기

 

// id로 태그 선택하기
const myTag1 = document.getElementById('id');
console.log(myTag1);

const myTag2 = document.getElementById('id');
console.log(myTag2);

const myTag3 = document.getElementById('id');
console.log(myTag3);

 

- getElementById 메소드

- id는 고유한 값이므로 하나의 태그를 선택할 때 유용함

- 해당 태그 내부에 있는 모든 내용을 포함 할 수 있음

- 존재하지 않는 태그를 선택하면 'null' 이 return 됨

---

2. Class로 태그 선택하기

 

<div>
      <button class="color-btn red" data-color="#FF0000"></button>
      <button class="color-btn orange" data-color="#FFA500"></button>
      <button class="color-btn yellow" data-color="#FFFF00"></button>
      <button class="color-btn green" data-color="#008000"></button>
      <button class="color-btn blue" data-color="#0000FF"></button>
      <button class="color-btn indigo" data-color="#4B0082"></button>
      <button class="color-btn purple" data-color="#800080"></button>
      <button class="color-btn black" data-color="#000000"></button>
    </div>

const myTags1 = document.getElementsByClassName('color-btn');
console.log(myTags1);
console.log(myTags1[1]);
console.log(myTags1.length);

for (let tag of myTags1) {
	console.log(tag);
}

const myTags2 = document.getElementsByClassName('red');
console.log(myTags2);
console.log(myTags2[0]); //특정 요소에 접근하려면 인덱스 값을 지정해야함.

const myTags3 = document.getElementsByClassName('white');
console.log(myTags3);
console.log(myTags3 === null); //빈 html 값이 출력되므로 false
console.log(myTags3.length);//0

 

- 여러 태그를 한번에 선택하므로 getElementsByClassName 메소드 사용

- 존재하지 않는 태그를 선택하면 lenght property가 0인 빈 html값이 return 됨

- 태그의 순서는 깊이와 상관없이 위에서부터 차례대로임

---

3. 태그 이름으로 선택하기

 

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

const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*');

 

- document.getElementsByTagName('태그이름') 메소드 사용

- HTML 문서 내의 모든 'button' 태그 선택

- CSS 선택자처럼 '*' 를 쓰면 문서 전체 선택 가능함

---

4. CSS 선택자로 태그 선택하기

 

// css 선택자로 태그 선택하기
const myTag = document.querySelector('#myNumber');
console.log(myTag);

const myTag2 = document.getElementById('myNumber');
console.log(myTag2);

const myTag3 = document.querySelector('.color-btn');
console.log(myTag3); // .color-btn 요소 중 첫번째 요소만 선택 됨.

const myTags1 = document.querySelectorAll('.color-btn');
console.log(myTags1); // NodeList 라는 유사배열 출력, .color-btn 요소 모두 선택됨

const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2); // HTMLCollection 라는 유사배열 출력

 

- document.querySelector('태그이름'); 메소드 사용

- 여러 요소를 선택하고 싶으면 querySelectorAll 사용

- querySelectorAll 로 존재하지 않는 값 선택하면 'null' return 됨