DOM

DOMはDocument Object Modelの略で、オブジェクトのようにHTML要素を操作できるモデルです.
DOMはプログラマーの視点から見たHTMLであり,ブラウザ環境でJSを用いてHTMLを操作できる.

1.スクリプト要素の場所

スクリプト要素の位置が重要なのは、Webブラウザが作成したコードを解釈する過程でスクリプト要素に遭遇した場合、WebブラウザがHTMLの解析を停止し、まずスクリプト要素を実行するため、スクリプト要素の位置設定が重要であるからです.

script要素の位置は、headタグまたはbodyタグが終了する前に入れる方法を代表します.
2つの方法の違いは、Webブラウザがコードを解釈する過程で異なることです.
script要素がheadラベルに表示されると、body部分のHTMLを解析する前にscript要素が最初に読み込まれ、開発者が予期せぬ事態に陥る可能性があります.
しかし、bodyラベルが終わる前にscript要素を無条件に入れるのも良い方法ではありません.
その理由は,scriptコンテンツが大きくHTMLコンテンツに直接作用するコードが少ないと仮定し,速度面ではbodyタグが終了する前にscript要素を入れるよりもheadタグに位置する方がよいからである.

2.Documentオブジェクト

DocumentオブジェクトはWebページそのものを表します.
Webページに存在するHTML要素にアクセスする場合は、Documentオブジェクトにアクセスする必要があります.

サブエレメントのクエリー方法

サブエレメントのクエリー方法にはchildNodesとchildrenがあります.

childNodes

document.조회하고자하는요소.childNodes

childNodesは、要素サブノードを含むNodeListを返します.NodeListには、要素ノードだけでなく、アノテーションノードなどの非要素ノードも含まれます.

children

document.조회하고자하는요소.children

childrenは、要素サブ要素を含むHTML Collectionを返し、すべての非要素ノードが除外されます.

親要素のクエリー方法

親の検索方法にはparentNodeとparentElementがあります.

parentNode

document.조회하고자하는요소.parentNode

parentNodeは、親ノードがない場合にドキュメントノードに戻ります.
すなわちparentNodeはhtml要素以外のドキュメントノードにもアクセスできます.

parentElement

document.조회하고자하는요소.parentElement

parentElementは、親ノードがない場合にnullを返します.
つまりparentElementはhtml要素からしか離れません.

3.Documentメソッド

Documentオブジェクトには、HTML要素に関連する操作の処理に役立つ方法がいくつかあります.
ここではCURDしか知りません.

Create

createElementは、新しいHTML要素を生成するための方法です.

document.createElement("HTML요소")

createElementを使用して新しいHTML要素を生成できますが、HTMLでは表示されません.
これは、生成されたHTML要素がappendを介して必要な位置に入れなければならないためです.

document.Element.append(생성된HTML요소)

Read

DOMを使用してHTML要素情報を照会する方法は多種多様であり、HTMLタグ、id、class、nameの属性値を使用して照会してもよいし、コレクタを使用してパラメータとして照会してもよい.

getElementByTagName

document.getElementByTagName("HTMLtag")

ラベル名のすべての要素をクエリーします.

getElementById

document.getElementById("Id")

IDの要素を問い合わせる.

getElementByClassName

document.getElementByClassName("Class")

クラス内のすべての要素をクエリーします.

getElementByName

document.getElementByName("Name")

name属性値のすべての要素をクエリーします.

querySelector

document.querySelector("Selector")

コレクタの最初の要素をクエリーします.

querySelectorAll

document.querySelectorAll("Selector")

コレクタ内のすべての要素をクエリーします.

Update

既存のHTMLタグの内容を変更したり、新しく生成されたHTMLタグにコンテンツを追加する方法としてはtextContent、innerText、innerHTMLがあります.
もう1つの方法は、classList、setAttribute用にHTMLタグのclassまたは属性および属性値を変更または追加することです.

textContent

textContentは、ノードが持つテキスト値を取得し、テキスト値を入力することで変更できるノードのプロパティです.

innerText

innerTextはElementのプロパティで、ユーザーに表示されるテキスト値をテキスト値を入力することで変更できます.

innerHTML

innerHTMLはElementのプロパティで、テキスト値を入力することでElementのHTML、XMLを変更できます.

classList

classList自体は読み取り専用ですが、追加および削除メソッドを使用して他の機能を実行できます.

classList.add

addメソッドは、指定したclass値をHTML要素のclassに追加します.

Element.classList.add("Class")

classList.remove

removeメソッドでは、HTML要素のclassに指定されたclass値が削除されます.

Element.classList.remove("Class")

setAttribute

setAttributeは、HTML要素の選択した属性に属性値を指定する方法です.

Elemnet.setAttribute(name, value)

name:html要素のプロパティを設定する
value:nameからの属性の属性値を設定する

DELETE

remove、removeChildはHTML要素を削除する方法です.

remove

Element.remove()

エレメントが属するツリーからエレメントを削除します.

removeChild

サブエレメントの削除方法を指定します.
戻り値には、DOMからサブノードを削除し、削除したノードを返します.
戻り値が変数に保存されていない場合、削除ノードの参照は存在しないため、JSエンジンのGC(Garbage Collection)によって後でメモリから削除されます.
戻り値を変数に含めると、他のDOM位置に貼り付けて使用できます.

Node.removeChild(child)

child:DOMから削除するサブノード

removeとremoveChildの違い

removeとremoveChildは基本的に同じ機能で使用されますが、removeはメモリからノードを削除および終了しますが、removeChildはノードを削除しません.
このノードはメモリにまだ存在し、親ノードとは関係を切断し、DOMツリーから解放されます.
また、removeChildでは親別名が必要ですが、removeでは親別名は必要ありません.

4.イベント（イベント）

イベント(Event)とは、Webブラウザから通知されたHTML要素上でイベントが発生することを意味する.
Webページで使用されるJavaScriptは、これらのイベントに応答して特定の操作を実行できます.

Event Listener

イベントリスナーとは、イベント発生時に処理を担当する関数であり、イベントハンドラ(event handler)とも呼ばれる.(厳密には、機能は少し違いますが、機能は同じです)
指定したタイプのイベントがエレメント上で発生した場合、Webブラウザはそのエレメントに登録されたイベントリスナーを実行します.

イベントのタイプ

イベントはいろいろありますが、イベント前にonをつければいいです.
ここでは、代表的なマウスイベントとキーイベントのみを説明します.

マウスイベント

クリック:要素をクリックしたとき
dblclclick:要素をダブルクリックする場合
mouseover:要素にマウスを置くと
mouseout:マウスが要素から離れると
mousemove:マウスを要素に移動すると

重要なイベント

keydown:キーを押すと
keyup:キーが切れたとき
キー:キーを押したまま

イベントリスナーの登録方法

イベントリスナー登録方法には、イベントリスナーをPropertyとしてオブジェクトまたは要素に登録する方法と、イベントリスナーをオブジェクトまたは要素として渡す方法があります.

Propertyとしてオブジェクトまたは要素に登録します。

Element.on이벤트=function(){
  이벤트에동작할코드
}

イベントリスナーをオブジェクトまたは要素に渡す方法。

Element.addEventListener(이벤트, function(){
  이벤트에동작할코드
})