(1) Interactive JavaScript - id,class tag select

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

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

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

한번 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

Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.

github.com

'JS' 카테고리의 다른 글

(3) Interactive JavaScript - Event and Button_click (0)	2024.10.08
(2) Interactive JavaScript - CSS 선택자로 tag select (0)	2024.10.08
(40) JavaScript - 자료형(심화) / const, 변수&상수 간단이론 (0)	2024.10.04
(39) JavaScript - 자료형(심화) / 참조형 copy하기 (0)	2024.10.04
(38) JavaScript - 자료형(심화) / 기본형과 참조형 (0)	2024.10.04