인터랙티브 자바스크립트 : 태그 선택하기

 

 

 

<인터랙티브 자바스크립트>

 

웹 서비스와 JavaScript

 

 

JavaScript

웹 페이지를 다양하게 동작하도록 만들어준다

 

 

 

id로 태그 선택하기

 

 

document 객체의 getElementById 라는 메소드를 사용해서 id로 태그를 선택한다

 

// id 태그 선택하기

const myTag= document.getElementById('myNumber');//접근하고자하는 id 값을 문자열로 전달한다
console.log(myTag);

 

→ id 속성을 택해서 어떤 요소를 가져오겠다는 의미

 

 

☑️실행결과

myNumber를 id로 가진 태그가 출력된다

 

 

 

 

 

💡존재하지 않은 id를 파라미터에 넣으면 undefined가 아니리 null 값이 리턴된다

 

 

 

class로 태그 선택하기

 

document 객체의  getElementsByClassName 메소드를 사용하여 class 태그를 선택한다 

 

//class로 태그 선택하기 
const myTags = document.getElementsByClassName('color-btn');
console.log(myTags);

 

 

 

☑️실행결과

 

 

 

배열로 출력되긴하나 배열의 메소드를 다 사용할 순 없다

→ 유사 배열

 

• 요소들의 순서는 깊이와 상관없이 위에서부터 차례대로 출력된다

• 하나밖에 없는 클래스를 선택하더라도 요소가 한 개 들어있는 HTMLCollection이 출력된다

• 없는 값을 리턴하면 null값이 리턴되는 것이 아니라 비어있는 HTMLCollection이 출력된다

 

 

📌 유사 배열(Array-Like Object)이란?

배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태 
1. 숫자 형태의 indexing이 가능하다.
2. length 프로퍼티가 있다.
3. 배열의 기본 메소드를 사용할 수 없다.
4. Array.isArray(유사배열)은 false다.


주의사항: 유사 배열은 다양하다
HTMLCollection의 경우 for..of 문을 활용하는 데 문제는 없었지만 어떤 유사 배열의 경우에는 for..of문을 활용할 수 없는 경우도 있다

 

 

 

 

 

css 선택자로 태그 선택하기

 

 

document 객체의 querySelector 메소드르 사용한다 

 

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


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

 

 

클래스로 여러 요소를 표현하고 싶을 땐 querySelectorAll를 사용한다 

참고로 `getElementById`와 동일하게 `querySelector` 메소드를 활용해 존재하지 않는 요소를 선택할 경우에는 `null` 값을 리턴한다

 

`querySelectorAll` 메소드를 활용할 경우 해당되는 요소가 하나 밖에 없더라도 요소가 하나인 NodeList를 반환하기 때문에 이 보기는 NodeList를 출력하게된다 

`querySelector` 메소드를 활용할 경우, 해당되는 요소가 여러 개가 있더라도 가장 첫 번째 요소만 선택

`querySelector` 메소드에 class 선택자를 활용할 경우, 여러 개의 클래스를 가진 요소들이 있더라도 가장 첫 번째 요소만 선택

 

 

💡하나의 요소를 선택할 때는 querySelector를, 여러 개의 요소를 선택할 때는 querySelectorAll을 사용할 것 

 

 

 

 

---

 

 

메소드	의미	결과
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)