TIL

DOMについて

DOMはDocumentオブジェクトモデルの略で、JavaScriptオブジェクトのようにHTML要素を操作できるモデルです.つまり、JavaScriptが使用可能であればDOMを使用してHTMLを操作することができる.

HTMLにJavaScriptを適用する

HTMLをJavaScriptに適用するには、<'script'タグを使用する必要があります.

<script src = "myScriptFile.js"></script> => HTML 파일과 같은
 디렉토리에 존재하는 myScriptFile.js을 불러온다.

Webブラウザで作成されたコードを解析中に<script>要素に遭遇した場合、WebブラウザはHTMLの解析を一時停止します.HTMLの解析を一時停止したWebブラウザは、まず<script>要素を実行します.<script>要素は出現に伴って実行される.

どちらもmyscriptFileです.js内の最初のコンソール.logを出力しますが、2番目のコンソールです.logが正しく出力されていません.
Domの関係図構造から見ると、体は一番上にあり、下に複数のコンポーネントが親子関係を持っている.この資料構造はコンピュータ工学ではツリー構造と呼ばれている.木の構造の最大の特徴は、親に複数の子供がいて、親には1つの構造が重複していることです.つまり、1つ以上の親をクエリーするコードを作成した場合は、複数回繰り返し実行するコードが必要です.

Domを使用したHTML操作

CRUD-文書オブジェクトによるHTMLセグメントの作成、クエリー、更新、削除を行うDELETE方式.

CREATE - createElement

の新しいdiv要素が作成され、変数に割り当てられます.しかし、tweetDivは現在何も接続されていないノードであるため、画面には変化はありません.

APPEND - append, appendChild

document.body.append(tweetDiv)により、tweetDivに変数bodyを入れることができる.

append():選択した要素の内部の末尾にコンテンツを挿入します.

prepend():選択した要素の内部の先頭にコンテンツを挿入します.
append VS appendChild

append():Javascript関数で、文字列を挿入できます.

appendChild():DOM関数で文字列を挿入できません.ここではパラメータと同じ要素が必要です.

READ - querySelector, querySelectorAll

DOMを使用してHTML要素の情報を照会するには、セレクタをquerySelectorの最初のパラメータとして確認します.HTMLタグ("div")、ID("#tweetList")、クラス(.tweet)は、最も一般的なコレクタです.const oneTweet = document.querySelector('.tweet')-querySelectorクエリクラス名tweetのHTMLページの最初のページ.
一度に複数の装飾を得るために、querySelectorAllを使用する.このようにクエリのHTML要素は配列のようにfor文を使用することができる.以前にクエリされたHTMLページは配列ではなく、これらの「非配列」は類似配列、配列オブジェクトなど様々な名前と呼ばれています.正式名称はArray-like Object.
に追加されたtweetDivは、単独のclassは指定されていないため、CSSによる造形には適用されません.新しく生成されたtweetDivにclassを貼り付け、造形を適用します.

UPDATE - textContent, classList.add

テキストコンテンツを使用して文字列を入力します.
classList.addを使用してtweetクラスを追加します.
appendを使用してコンテナのサブエレメントにoneDivを追加します.

DELETE - remove, removeChild

削除方法には、削除するエンティティの場所を知っている場合は、削除方法を使用して以前に作成および追加したtweetDivを削除できます.
idがコンテナのページの下にtweetDivを追加し、removeとして削除します.
複数のサブセグメントを削除するにはinnerHTMLを使用します.document.querySelector('#container').innerHTML = '';=>idは、容器の注釈の下にあるすべての注釈である.innerHTMLを使用するのは明らかに簡単で便利な方法ですが、innerHTMLはセキュリティの面でいくつかの問題があります.この方法に代わる別の方法removeChildは、サブエレメント削除を指定する方法である.すべてのサブ要素を削除するには、繰り返し文(while,for,etc.)を使用します.
containerの最初のサブエイリアスがある場合は、最初のサブエイリアスが削除されます.

Tomorrow