(1) Interactive JavaScript - id,class tag select

index.html

0.00MB

style.css

0.00MB

---

어떤 태그를 움직이거나 사용자의 마우스를 클릭에 반응하도록 하기위해선

먼저 본인이 다루고자 하는 태그를 선택해야한다.

자바스크립트로 본인이 원하는 태그를 선택하는 방법은 여러가지있는데,

한번 id 속성을 통해 HTML 태그를 선택해보자

 

id로 태그 선택하기 - document.getElementById

기본 문법은 다음과 같다▼

document.getElementById()

 

자바스크립트를 배울 때 가장 많이 사용 했던 console.log 처럼 그냥 미리 만들어져있는 

document 라는 객체의 getElementById 메소드를 사용한다.

메소드 이름 그대로 id 속성을 통해서 어떠한 요소를 가져오겠다는 의미이다.

 

그래서 이 메소드의 파리미터로 우리가 접근하고자 하는 태그의 id 값을 문자열로 전달해 주게 되면 

해당되는 태그가 선택되는 원리이다.

한번 실제로 태그를 선택해보자▼

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

 

일단 HTML 파일을 보면 myNumber,btns,decrease,increase라는 id 태그들이 있는데

<div id="myNumber">0</div>
  <div id="btns">
    <div>
      <button id="decrease">-</button>
      <button id="increase">+</button>
    </div>
    <div>
      <button class="color-btn red" data-color="#FF0000"></button>
                                    ⋮
                                    ⋮
                                    ⋮

 

다시 JS파일로 들어와서 myNumber로 적용하고 myTag라는 변수에 담아준다.▼

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

출력해서 결과를 보면..

이렇게 myNumber id를 가진 태그가 출력된 것을 확인할 수 있다.

 

myNumber 같은 경우에는 HTML파일에 적은대로 숫자 값 0만 가지고 있기 때문에  

딱 그 태그만 보여주는 것 처럼 오해할 수있지만 전혀 그렇지 않다.
btns 태그를 보면 내부에 다른 여러 태그들을 포함하고 있는데 

<div id="btns">
    <div>
      <button id="decrease">-</button>
      <button id="increase">+</button>
    </div>
    <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>
  </div>

 

그래서 이 btn태그를 콘솔에 출력해보면 ▼

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

btns 태그 하나만 보여 주는게 아니라 해당 태그 내부에 있는 모든 내용들이 표시된다는 점을 확인할 수 있다.

---

이렇게 document.getElementById라는 메소드를 활용해서 id 속성을 가지고 태그를 선택해봤다.

HTMl 태그에서 id 속성은 코드 전체에서 봤을 때

다른 태그들과 구분하기 위해 붙여주는 고유값이라고 했을 때,

id 속성을 활용하면 필요한 태그를 명확하게 선택할 수 있다는 장점이 있다.

 

그렇기 때문에 자바스크립트로 딱 하나의 요소만을 선택할 때는 

HTML태그에 id 속성을 부여하고 getElementById 메소드를 활용할 수 있다.

 

침고로 이 메소드를 통해서 존재하지 않는 태그를 선택하게 되면 ▼

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

undefined가아닌 null 값이 리턴되는 점 또한 알아두는 것이 좋다.

---

 

id는 고유한 값이기 때문에 하나의 태그를 선택할 때는 유용하지만 

만약 여러 요소들을 동시에 선택해야 할 때에는 활용하기 어렵다.

CSS로 스타일링 할 때도 여러 요소들의 스타일을 한꺼번에 다룰 때는 id 보다는 class 속성을 주로 썼는데

한번 클래스 속성을 활용해서 태그를 선택해보자

 

class로 태그 선택하기 - document.getElementsByClassName

마찬가지로 document 객체를 활용하고

클래스로 태그를 선택하는 메소드의 이름은 getElemnetsByClassName 이다.▼

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

 

HTML 파일에 'color-btn' 클래스를 가진 태그들을 선택하기 위해  myTags변수에 담아주고 콘솔에 출력▼

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

 

출력하면 이렇게 color-btn 클레스가 있는 모든 태그들이 대괄호로 감싸져서 배열의 형태로 선택 되어있는 것을 볼 수 있으며 각 값들마다 인덱스도 있고 length 프로퍼티도 있어서 마치 배열 같아 보이지만 

배열을 다룰 때 사용했던 splice나 push 같은 메소드는 사용할 수 없기에 완벽한 배열은 아니다.

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

console.log(myTags[1]); //myTags index 접근
console.log(myTags.length); //myTags length 프로퍼티 활용
for(let tag of myTags) { //myTags for...of 문으로 활용
    console.log(tag);
}

▲ 배열의 메소드는 사용할 수 없지만

대괄호 표기법으로 인덱스에 접근한다거나

또는 length 프로퍼티를 활용한다거나

혹은 for...of문을 사용하는 데는 아무런 문제가 없을 것이다. ▼

 

참고로 이렇게 여러 개의 값을 담고 있는 배열과 형태는 유사하지만 

배열의 메소드는 사용할 수 없는 것들을 가리켜서 유사배열(Array-Like Object) 라고 부른다. 

 

이렇게 HTMLCollection에 들어가는 요소들의 순서는 

HTML 태그에서 봤을 때 깊이와는 상관없이 무조건 위에서부터 오름차순이다.

깊이와 상관없이 들어가는 요소들의 순서는 위에서부터 차례대로!!

 

---

 

getElementsByClassName 메소드를 사용해서 클래스가 하나밖에 없는 값에 접근하려고 하면 

id처럼 태그가 하나밖에없으니 딱 그 태그가 선택될 것이라 오해할 수 있는데 그렇지 않다.

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

▲ 만약 이렇게 red라는 하나밖에 없는 클래스 선택하더라도 실행해보면

요소 한 개가 들어있는 HTMLCollection이 출력되기 때문에 ▼

이 태그를 선택하려면 아래 코드처럼 index 0번에 접근해야한다.▼

const myTags = document.getElementsByClassName('red')
console.log(myTags);

console.log(myTags[0]); //myTags 0번 index 접근
console.log(myTags.length); 
for(let tag of myTags) { 
    console.log(tag);
}

---

또한 위에서 했었던 존재하지 않는 id 값으로 태그하면 null 값이 반환된다고 했을 때,

getElementsByClassname으로 존재하지 않는 클래스 값을 찾게 되면 

null 값이 아니라 빈 HTMLCollection이 출력 된다. ▼

//class 태그 선택하기
const myTags = document.getElementsByClassName('seopE') // 존재하지 않는 클래스
console.log(myTags);

console.log(myTags[0]);
console.log(myTags.length);
for(let tag of myTags) { 
    console.log(tag);
}

 

그래서 이렇게 null과 비교했을 때, length 프로퍼티를 한번 출력해보면

false와 0이 출력된다는 점을 참고하자. ▼

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

console.log(myTags[0]); 
console.log(myTags.length); 
for(let tag of myTags) { 
    console.log(tag);
}

console.log('-------------------------------');
console.log(myTags === null); //false
console.log(myTags.length);   // 0

이렇게 getElementsByClassName 메소드로 자바스크립트를 통해 여러 태그를 한 번에 선택 해봤다.

CSS 여러 태그에 한꺼번에 스타일 입힐 때도 클래스 속성을 활용하듯이

자바스크립트로도 클래스 속성을 활용 할 수 있다.

---

태그 이름으로 태그 선택하기 - document.getElementsByTagName

지금까지 id와 class 속성을 이용해서 JavaScript로 HTML 태그를 선택하는 방법에 대해 알아봤는데 document.getElementsByTagName('태그이름')메소드를 활용하면 태그 이름으로 태그를 선택할 수 있다.

기초문법은 다음과 같다.▼

document.getElementsByTagName('');

 

간단하게 HTML 문서 내에 있는 모든 button 태그를 선택하게 하기위해 변수를 지정하고 

id와 클래스 이름명이 아닌 단순 button 태그를 넣어주면 된다.▼

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

document.getElementsByClassName('class')메소드와 마찬가지로 

태그 이름으로 요소를 찾는 경우에 여러 개의 요소가 선택될 수 있기 때문에 

메소드 이름에 Element(s), s가 있고, 실행결과 역시 HTMLCollection을 리턴한다는 점도 알아두자.

 

모든 태그 선택하기

css 선택자처럼 * 값을 전달하게 되면 모든 태그를 선택할 수도 있다.▼

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

하지만, css 스타일링을 할 때도 태그 이름으로 스타일링을 하는 경우는 거의 없다시피

명확한 의도가 없이 이렇게 많은 요소들을 한꺼번에 다루게 되면 예상치 못한 실수를 할 가능성이 있기 때문에

자바스크립트에서도 많이 사용되는 메소드는 아니다. 딱히 권장하지도 않는다.

 

유사 배열(Array-Like Object)

아까 위에서 봤던 '유사배열'은

배열과 모양은 같지만, 완벽히 배열은 아닌 이런 형태를 유사 배열이라고 부른다고 했었는데,

당장은 직접 유사 배열을 만들어서 사용하게 될 일은 없겠지만, 

자바스크립트로 HTML 태그를 다룰 때 종종 마주치게 되니깐 개념을 짚고 넘어가야한다.

 

앞에서도 설명한 것처럼 이름 그대로 배열과 유사(類似)한 객체를 유사 배열, 영어로는 Array-Like Object라고 부른다.

하지만 마냥 모양만 비슷하다고 해서 모두 유사 배열이라고 부르진 않으며

유사 배열에도 최소한 갖춰야 할 조건과 특징들이 있다.

 

• 숫자 형태의 indexing이 가능

배열은 각 요소에 0부터 순서대로 매겨진 index를 통해 요소끼리의 관계도 파악할 수 있고 그 index를 통해 요소에 접근할 수도 있다는 특징이 있다고 했을 때, 유사 배열도 마찬가지로 배열이라는 이름에 걸맞게 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 한다.

 

• length 프로퍼티 존재

객체가 가지고 있는 요소의 갯수를 저장하는 length 프로퍼티도 역시 배열의 특징이라고 할 수 있는데,

유사 배열 역시 length 프로퍼티가 있어야 비로소 유사 배열이라고 할 수 있다.

숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있다.

 

• 배열의 기본 메소드 사용 X

상황에 따라서 직접 구현할 수도 있겠지만, 유사 배열이 완전한 배열이 아닌 가장 큰 이유는 바로 기본적인 배열의 메소드를 사용할 수 없다는 점 때문이며  배열의 메소드를 활용할 수 없다는 특징이 유사 배열을 활용하는 목적이 되기도 한다. indexing을 통해 유사 배열의 요소에 접근하는 건 쉽지만 수정하거나 삭제하는 작업이 까다롭다.

그래서 내부의 요소들은 배열처럼 다룰 수 있게 하면서 배열의 메소드 사용을 막고 싶거나, 혹은 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 한다.

 

• 유사배열 = false

Array 객체의 isArray 메소드는 파라미터로 전달한 값이 배열인지 아닌지를 평가해서

그 결과를 불린 형태의 값으로 리턴해주는 메소드이다.

유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 결괏값이 false 이다.

 

▼ 결론 -  다양한 유사 배열이 존재한다.

유사 배열은 위의 특징들을 가진 대부분의 형태를 가리키는 포괄적인 개념이기 때문에 정말 다양한 형태로 존재할 수 있다. 예를 들어 HTMLCollection의 경우 for..of 문을 활용하는 데 문제는 없었지만 어떤 유사 배열의 경우에는 for..of문을 활용할 수 없는 경우도 있으며, 배열의 기본 메소드를 사용할 수 없다고 했지만, 직접 구현해서 마치 배열처럼 사용할 수 있도록 만들 수도 있다.

하지만 직접 유사 배열을 만드는 게 아니라 이미 만들어진 유사 배열에 접근하는 경우에는 대부분 위 4가지 특징을 모두 가지고 있으므로 숙지하고 있는 게 좋다.

---

★GitHub 주소 (id, class 태그 선택하기)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/interactive_JS/01.id%ED%83%9C%EA%B7%B8%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0/index.js

JavaScript_soloPlay/interactive_JS/01.id태그선택하기/index.js at main · SeopE9611/JavaScript_soloPlay