Web第4週

コアキー🎯

DOMとJavaScript

ドキュメントオブジェクトモデル(DOM、Documentオブジェクトモデル)は、XMLまたはHTMLドキュメントにアクセスするインタフェースです.

このオブジェクトモデルは、ドキュメント内のすべての要素を定義し、これらの要素にアクセスする方法を提供します.
この点を利用する.
JavaScriptでは、新しいHTML要素または属性を追加できます.
JavaScriptでは、既存のHTML要素または属性を削除できます.
JavaScriptでは、HTMLドキュメント内のすべてのHTML要素を変更できます.
JavaScriptでは、HTMLドキュメントのすべてのHTML属性を変更できます.

querySelector
指定した選択プログラムまたは選択パッケージに一致するドキュメントの最初のElementを返します.一致する要素がない場合はnullを返します.

document.querySelector(selectors);

appendChild
Node.appendChild()メソッドは、1つのノードを特定の親ノードのサブノードリストの最後のサブノードとして貼り付けます.ドキュメントにすでに存在するノードを参照するノードが指定されている場合、appendChild()メソッドはノードを現在の位置から新しい位置に移動します.

insertAdjacentHTML
HTMLやXMLなどの特定のテキストをグループ化し、必要なノードを特定の場所でDOMツリーに追加します.すでに使用されている要素はグループ化されません.したがって、要素に存在する要素

には触れない.

document

getElementsByTagName
別名のHTML Collectionと指定したタグ名を返します.ルートノードを含むドキュメント全体を検索します.戻ってきたHTML Collectionは生きていて、これはdocumentです.getElementsByTagName()を自動的に更新し、DOMツリーとの同期を維持します.

getElementsByClassName
指定されたクラスのすべてのサブ要素を持つリアルタイムHTML Collectionを返します.

getElementById
指定された文字列に一致するid属性を持つ要素を検索し、その属性を表すElementオブジェクトを返します.IDは、ドキュメント内で一意である必要があるため、特定の要素をすばやく検索するときに便利です.

innerText
要素とそのサブ要素のレンダリングテキストの内容を表します.InnerTextは、カーソルを使用して要素の内容を選択し、クリップボードにコピーしたときに得られるテキストの近似値を提供します.
spread operator
電子オペレータをハングルに翻訳すると、展開演算子として扱うことができます.スプレッドシートオペレータは、特定のオブジェクトまたは配列の値を他のオブジェクトまたは配列にコピーまたは移動する場合に使用します.演算子の形状は...こんなに長い

Array.from
メソッドは、類似配列オブジェクト(array-like object)または反復可能オブジェクト(iterable object)を浅くコピーすることによって、新しいArrayオブジェクトを作成します.

element

[ ] classList
読み取り専用プログラムであり、Ellimentクラス属性の集合、すなわちアクティブなDOMTOKENListを返します.
Element.classListの戻りタイプは「DOMTokenList」です.
DomTokenListの3つの方法の中で最も代表的なものを見てみましょう.

Element.classList.toggle

これは、スイッチ切り替えやランプスイッチの再起動など、0と1の動作が繰り返されることを意味する.
つまり、既存の値が0の場合は1になり、既存の値が1の場合は0になります.
したがって、切り替え方法は、クラスが存在する場合にクラスを削除し、クラスが存在しない場合にクラスを追加することです.

Element.classList.add

指定したクラスのメソッドを追加します.

Element.classList.remove

指定したクラスのメソッドを削除します.
[ ] setAttribute
指定した要素の属性値を設定します.属性が既に存在する場合は、この値が更新されます.それ以外の場合、指定した名前と値を使用して新しいプロパティが追加されます.
属性の現在の値を取得するには、getAttribute()を使用します.属性を削除するにはremoveAttribute()を使用します.