태그 선택하기

ID로 선택하기

//id로 태그 선택하기
document.getElementById('Id');

ID속성을 통해서 어떤 요소를 가져 오겠다는 뜻이다. id 값을 문자열로 전달해 주게 되면 해당되는 태그가 선택되는 원리이다.

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

//출력되는 값, HTML에 적혀 있는 태그가 보인다.
<div id="myNumber">0</div>

뿐만 아니라 자식요소가 있는 부모요소를 선택하게 되면 부모태그 요소에 있는 모든 내용들이 표시 되고, 존재하지 않는 태그를 선택하게 되면 null값이 리턴된다.

장점 : 필요한 태그를 명확하게 선택할 수 있다.

---

Class로 선택하기

//class로 태그 선택하기
document.getElementsByClassName('class');

class는 id와는 다르게 여러 태그에 붙을 수 있어 Element"s"로 작성해야 하니 주의하자.

const myTags = document.getElementsByClassName('color-btn');
console.log(myTags);

출력된 화면

"color-btn" 클래스가 있는 모든 태그들이  대괄호로 감싸져 배열의 형태로 선택됐다. length 프로퍼티도 있어서 배열 같지만, 완벽한 배열은 아니다. 배열을 다룰 때 사용하는 splice나 push 같은 메소드는 사용할 수가 없기 때문에 배열이라고 부르기는 어렵다.

console.log(myTags[1]);
console.log(myTags.length);

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

배열 메소드는 사용할 수 없지만 대괄호 표기법으로 1번 인덱스에 접근한다거나, length 프로퍼티를 활용할 수 있고, for...of 문을 사용하는데에는 아무런 문제가 없다.

+ 여러개의 값을 담고 있는 배열과 형태는 유사하지만 배열의 메소드는 사용할 수 없는 것들을 가리켜서 유사배열(Array-Like Object)이라고 한다.

그리고 클래스가 하나 밖에 없는 값에 접근하려고 하면, 태그가 하나 밖에 없으니 딱 그 태그가 선택될거라고 생각할 수 있다. 확인을 해보면 요소가 한개가 들어있는 HTMLCollection이 출력되기 때문에 그 태그를 선택하려면 [0] 번째 인덱스에 접근 해야 된다.

존재하지 않는 태그를 선택하게 되면 null값이 리턴되던 id 태그 선택과는 다르게 비어있는 HTMLCollection이 출력된다.

console.log(myTags === null); //false, 비어있는 HTMLCollection은 null값과는 다르다.
console.log(myTags.length); //0

---

+ 여담

유사배열의 특징

1. 숫자 형태의 indexing이 가능하다. : 유사배열도 배열과 마찬가지로 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 한다.
2. length 프로퍼티가 있다. : 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사배열이라기 보다 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있다.
3. 배열의 기본메소드를 사용할 수 없다. : 인덱싱을 통해 유사배열의 요소에 접근은 쉽지만 수정이나 삭제는 까다롭다. 그래서 내부 요소들은 배열처럼 다룰 수 있으면서 배열의 메소드 사용을 막고싶거나 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 활용한다.
4. Array.isArray(유사배열)은 false다. : 유사 배열은 배열과 비슷하지만 배열이 아니기 때문에 결과값이 false이다.

---

태그 이름으로 선택하기

//태그 이름으로 태그 선택하기
document.getElementsByTagName('태그이름');

class와 마찬가지로 Element"s"로 작성해야 하니 주의! 실행결과 역시 class와 똑같이 HTMLCollection을 리턴한다.

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

css선택자처럼 '*' 값을 전달하게 되면 모든 태그를 선택할 수도 있다. 하지만 명확한 의도 없이 많은 요소를 한꺼번에 다루면 예상치 못한 실수를 할 수 있으니 주의하자. 많이 사용되는 메소드는 아니다.

---

CSS 선택자로 선택하기

//css 선택자로 태그 선택하기
document.querySelector('css선택자');

ID 는 #, class는 .을 이용해서 작성할 수 있다.

const myTag = document.querySelector('#myNumber');
console.log(myTag);

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

위 코드는 같은 값을 출력한다. #과 getElementById는 ID 속성을 가진 태그를 가져온다.

const myTag = document.querySelector('.color-btn');
console.log(myTag);

출력된 화면

HTML Collection과 같은유사배열이 출력될 것 같았지만, color-btn 클래스가 붙어있는 태그들 중에 가장 첫번째 요소(0번째 인덱스)가 선택되었다. 만약 같은 class를 가진 태그 여러개를 가져오고 싶다면 querySelectorAll 메소드를 활용할 수 있다.

const myTags = document.querySelectorAll('.color-btn');
console.log(myTags);

const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2);

출력되는 화면

document.querySelectorAll('.color-btn')는 NodeList가 출력됐고, getElementsByClassName('color-btn')는 HTML Collection이 출력됐다. 뭔가 이름은 조금 다르지만 안에 있는 요소는 동일하다.

+존재하지 않는 요소를 선택할 경우 querySelector는 (id 선택과 마찬가지로) null값을, querySelectorAll은 비어있는 NodeList를 리턴한다. 

---