JavaScript 2(id、classを使用してタグ/類似配列を選択)

✔id選択タグを使用(getElementById)

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

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

getElementById:id値読み込み

10004 class(getElementsByClassName)を選択

idは一意の値であるため、1つのタグを選択する際に役立ちますが、複数の要素を同時に選択する必要がある場合は利用しにくいです.
cssでモデリングを行う場合、複数の要素のスタイルを同時に処理する場合は、idではなくclassプロパティを使用します.
「クラス付き」とマークされたメソッドの名前を選択するにはgetElementsByClassNameです.要素ではなく複数の要素を選択することに注意してください.sがくっつく!⭐

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 myTag2 = document.getElementsByClassName('red');//red라는 하나밖에 없는 class 선택하더라도 HTMLCollection이 출력되기 때문에 이 태그를 선택하려면 0번 인덱스에 접근해야함.

console.log(myTags2);
console.log(myTags2[0]);

const myTags3 = document.getElementsByClassName('white');//존재하지 않는 값 선택하면 빈 HTMLCollection이 출력됨.

console.log(myTags3);
console.log(myTags3 === null);//false
console.log(myTags3.length);// 0
```![](https://velog.velcdn.com/images/kimhyesu-_-/post/87ec214c-54a7-489a-a254-eb833a27bb36/image.png)

これまでidとclassプロパティを使用してJavaScriptを使用してHTMLタグを選択する方法について説明してきました.document.getElementsByTagName(「タグ名」)メソッドでは、タグ名としてタグを選択できます.
const btns = document.getElementsByTagName('button');
//HTMLドキュメントのすべてのbuttonタグが選択されます.
document.getElementsByClassName(「class」)メソッドと同様に、
タグ名を使用して要素を検索すると、複数の要素が選択される場合があります.したがって、メソッド名にはElement(s)とsが含まれており、実行結果もHTML Collectionに戻ります.
const btns = document.getElementsByTagName('button');
const allTags = document.getElementsByTagName('*');//すべてに適用
しかし、css造形をする場合、サインで造形することはほとんどないのでは?
同様に、このように多くの要素を同時に処理して明確な意図がなければ、JavaScriptでよく使われる方法ではなく、予想外のエラーが発生する可能性があります.
前回の短い登場のHTML Collectionを覚えていますか?形状は配列と同じであるが,完璧な配列ではなく,この形態を類似配列と呼ぶ.
今では似たような配列を直接作成して使うことはありませんが、前回のようにJavaScriptを使ってHTMLタグを扱うときによく見かけるので、簡単に概念的な部分を話しましょう!

array-Like Objectとは?

類似アレイのオブジェクトを類似アレイ、英語でArray-Likeオブジェクトと呼びます.
しかし、すべての人が似たような配列と呼ばれているわけではありません.同様のアレイにもいくつかの条件と特徴があります.

1.数値形式のインデックスを作成できます。

配列の特徴は、ゼロから順番に並べられたインデックスで要素間の関係を知ることができ、インデックスで要素にアクセスできることですよね?
同様の配列には、配列の名前を一致させるために、ゼロから始まる数値形式のインデックスも必要です.

2.長さパーセントがあります。

ストレージオブジェクトが持つ要素の数の長さの割合も配列の特徴です.類似アレイは、類似アレイと呼ぶにはlength propertyも必要です.数値形式のインデックスがあり、長さの輪郭がない場合は、類似配列ではなく通常のオブジェクトと見なすことができます.

3.配列の基本的な方法を使用できません。

状況に応じて直接実装できますが、類似したアレイが完全なアレイではない最大の理由は、基本的なアレイの方法が使用できないためです.配列法を利用できない特徴も類似配列を利用する目的となっている.似たような配列の要素にインデックスでアクセスするのは簡単ですが、変更や削除は困難です.
したがって、内部要素を処理するときに配列のように配列メソッドを使用するか、通常の配列にない特別なメソッドを提供する場合は、類似した配列を作成して使用できます.

4. Array.isArray(類似配列)はfalseです。

ArrayオブジェクトのisArrayメソッドは、パラメータに渡される値が配列であるかどうかを評価することによって、結果を任意の形式の値に戻す方法です.
類似配列は配列に似ていますが、配列ではありません.そのため、欠落値はfalseです.

❗注意事項:類似の並び方が多種多様!

類似アレイは、上述した特徴を有する形状の多くを指す総合的な概念であり、従って、多様な形態で存在することができる.
例えば前回見たHTML Collectionof文の使用は問題ありませんが、似たような配列がある場合はforです.場合によっては、of文は使用できません.
アレイのデフォルトの方法は使用できませんが、アレイのように使用できるように直接実装することもできます.
ただし、類似アレイを直接作成するのではなく、作成した類似アレイにアクセスする場合は、ほとんどの場合、上記の4つの特徴がありますので、次のことを覚えておいてください.