JAvascript-深化版

やっとcodeit javascriptの基礎を聞いて、深化編に入りました!
焦らないでゆっくり

id選択タグの使用

documnetという名前のオブジェクトのgetElementByIdメソッドを使用します.

検索するIdタグの値を取得します.

が存在しないタグを選択すると、空の値が取得されます.

	const myTag = document.getElementById('myNumber'); 

classとマークする選択

getElementsByClassNameを使用してクラスラベルをインポートします.

位から順番に持ってきます.

注意

流砂配列.(HTMLCollection)

null以外の値のNull値を取得します.

	const myTags = document.getElementsByClassName('color-btn');
	console.log(myTags[1]);
	console.log(myTags.length);

	for (let tag of myTags){ 
    	console.log(tag);
    }

HTMLタグ名として選択

document.getElementsByTagName

タグのタグセット(HTML Collection)

類似アレイ(Array-Like Object)

HTML Collectionでよく見かけます.
類似配列のオブジェクトex)HTML Collection、NoteList、DOMTokenList、...

の数値形式のインデックスを使用できます.

lengthプロパティがあります.

配列のデフォルトメソッドは使用できません.

Array.isArray()の結果値はfalseです.

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

querySelector All()はタグセット

です.

	// 두 개의 결과 값이 같다.
	const myTag = document.querySelector('#myNumber')
    const myTag = document.getElementById('#myNumber')

    
    // 유사배열이 출력될 것 같지만, 가장 첫 번째 클래스만 불러온다.
    const myTag = document.querySelector('.color-btn');
	
	// 유사배열을 불러온다.
    const myTags = document.querySelectorAll('.color-btn');
    const myTags = document.getElementsByClassName('.color-btn');

イベントとボタンをクリック

イベントハンドルもHTMLコードで記述できます.

ただ

で、よく使われる書き方ではありません.

	const btn = document.querySelector('#myBtn')
    
    // 이벤트 핸들링(Event handling)
    btn.onclick = function() {	// 이벤트 핸들러(Event Handler)
		console.log('Hello Codeit!')
    }