JavaScript 2 cssセレクタとしてタグを選択

✔cssセレクタとしてマークを選択

const myTag = document.querySelector('#myNumber');//css선택자로 id 선택할땐 # 기호 사용
console.log(myTag);

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

//2,3번줄과 5,6번 줄은 같음. 검사 들어가서 확인하면 같은 결과 두번 출력

✔複数のタグを選択

const myTag3 = document.querySelector('.color-btn');//class는 앞에 . 붙임
console.log(myTag3);

const myTag1 = document.querySelectorAll('.color-btn');
console.log(myTag1);
//14,15번과 17,18번은 같음(안에 있는 요소 똑같음)
const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2);

getElementとquerySelectorの2つの方法がありますが、どちらの方法を使っても問題ありませんが、使用方法名自体が短く、利用率が高いquerySelectorがおすすめです.(他の人が作成したコードを表示するためにgetElementsでタグを選択できることを覚えておいてください)

✔勘定科目querySelectorおよびquerySelector Allの定理

cssセレクタを使用してタグを選択する方法は、ドキュメントオブジェクトのquerySelectorとquerySelector Allの2つです.
要素を選択するときにquerySelectorを使用します.
したがって、querySelector("#ID")はgetElementById("ID")と同じ結果を返します.
❗注意すべき点は、querySelectorメソッドを使用する場合、クラスやタグ名のように複数の要素が存在するセレクタを使用しても、その中の1つの最も古い要素のみを選択することであることを覚えておいてください!
getElementByIdと同じquerySelectorメソッドを使用して存在しない要素を選択するとnull値が返されます.
次に、複数の要素を選択するときにquerySelector Allを使用します.
複数の要素が選択されているため、各要素はNodeListという類似配列に含まれている.
100 querySelector Allを使用する場合は、存在しない要素が選択されている場合に注意してください.
未定義またはNULL値ではなく、NULLのNoteListが返されます.