TIL30.DOM

ドームドーム🎵 🐟 🐠 🐡 htmlとjsをより近づけるDOMの役割と使い方を理解してみましょう.

DOMの定義

ドキュメントオブジェクトモデル(Document Object Model,DOM)は、ブラウザがHTMLページを認識するように階層化し、ツリー構造を形成するオブジェクトモデルである.
簡単に言えば,オブジェクト化されたモデルにより,HTMLページとjsが相互接続する役割を果たす.

HTML DOMメソッドと構成

html要素の読み込み

document.getElementById(「id」):id名を使用して要素を読み込みます.
document.getElementsByTagName(「name」):tag名を使用して要素を読み込みます.
document.getElementsByClassName(「class」):class名を使用して要素を読み込みます.

html要素の置換

element.innerHTML=new htmlコンテンツ:要素を新しいコンテンツに置き換えます.
element.attribute=newvalue:属性値を変更します.
element.style.property=newstyle:要素スタイルを変更します.

要素の追加または削除

document.createElement(要素):要素を作成します.
document.removeChild(element):要素を削除します.
document.appendChild(element):要素を追加します.
document.置換Child(new,old):要素を置換します.

<h1 class="test">Good Morning</h1>

<script>
	const element = document.getElementById("test");
	element.innerHTML = "Good Evening";
</script>

// "Good Morning"에서 "Good Evening"으로 바뀜.

DOMイベント

このプログラムでは、ユーザーが任意の操作を実行すると、指定したイベントがトリガーされます.イベントの種類が多いので、必要なときに探してみたほうがいいです.

UIイベント

load:Webロード完了時
error:ブラウザでjsエラーが発生したか、リソースが要求されていません.
スクロール:ユーザーがページをスクロールするとき

キーボードイベント

onkeydown:ユーザーがすべてのキーを押すと
onkeypress:実際に文字を書き込む場合
onkeyup:ユーザーがキーボードを離れたとき

マウスイベント

クリック:ユーザーが要素をクリックした場合
mouseup:マウスボタンを離すと
mousedown:マウスクリック時
mouseover:マウスを要素の上に移動すると
mouseout:マウスがエレメント外に移動したとき

フォームイベント

input:input元素値が変化した場合
submit:ユーザーがキーを使用してフォームを提出する場合

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

*getElement VS querySelector

「両方ともhtml要素をロードしてjsに接続できます.」「なぜ2つは必要なのか」好奇心から違いを知った.getElementHTML Collectionを返却するquerySelectorNoteListを返却する.(なんだよ…😳)
HTML Collectionでは、DOMでの変更を動的にリアルタイムで変更します.
NodeListは静的なので、DOMの変更要素はリアルタイムでは変更されません.

<h1 class="a"></h1> 
<h1 class="a"></h1> 
<h1 class="a"></h1>

const htags = document.getElementByclassName('a');
for(i = 0; i < htags.length; i++) {
	htags[i].className = 'b';
}

//결과는 "b,b,b"가 아닌 "b,a,b"가 나왔다.
<h1 class="b"></h1> 
<h1 class="a"></h1> 
<h1 class="b"></h1>

「live collection」だったので、こんな問題が出てきました.
0番目のインデックスに近づき、「a」を「b」に変更します.その後i増減してindex 1号を探し,リアルタイム変更により0号を除く他の2つの要素のうち2番目がindex 1となる.
これらの問題を解決するにはquerySelectorを使用します.

*onclick VS addEventListener

2つの方法は、指定されたイベントが発生したときに関数を実装します.
onclickではコールバックは1つしか指定できませんが、addEventListenerでは複数のイベントリスナーを追加できます.addEventListenerより感性のある開発者とされている.

element.attachEvent('onclick', function() { /* do stuff here*/ });
element.addEventListener('click', function() { /* do stuff here*/ }, false);