DOM_2. CRUDとメソッド

CRUDの使い方
CRUDにアクセスしてDOMの方法を知る.CRUDは、作成、クエリー、更新、削除の略で、ほとんどのソフトウェアが持つ基本的なデータ処理機能です.これらの概念はソフトウェア開発の最低要件の指導原則とすることができ,新しい言語を学びたい人もCRUDに基づいて基礎技能を学ぶことができる.
CREATE
DOMの最も基本的な機能はHTMLページを生成することです.JavaScriptでdiv要素を作成する方法は次のとおりです.

const divElement = document.createElement('div')

シンボルメソッドを作成する基本的なシェイプは、dot notaionを使用してカッコ内の要素をドキュメントオブジェクトに追加することです.ただし、これらの作成のみではdiv要素は画面に表示されません.その理由は、以下に説明するappendがまだ完成していないためである.

document.body.append(divElement)

appendメソッドは、bodyの末尾に変数diveElementを追加します.prependメソッドを使用すると、bodyの最初のメソッドにdiveElementが追加されます.次に、Ellimentを検索する方法について説明します.
READ
DOMで別名をクエリーするには、classやidなどのCSSのセレクタ(セレクタ)を使用します.クエリのメソッドはquerySelectorです.次のメソッドを使用します.

const oneNotice = document.querySelector('.notice')

querySelectorのパラメータを使用してクラス「notice」を入力すると、同じクラスを持つHTML要素の最初の別名がクエリーされます.これと同様の方法はquerySelector Allであり、querySelectorとは異なり、同じクラスまたはIDを持つすべての要素を「類似配列」としてクエリーします.

document.getElementById('container')

上記getを使用する方法もクエリーに使用されます.この方式はquerySelectorに比べて速度が速いという利点があるが、querySelectorは複雑で具体的な選択が可能であるため、最近querySelectorがよく使われている.
UPDATE
DOM要素を更新する方法をご紹介します.

oneDiv.textContent = 'text here';
oneDiv.classList.add('container')
console.log(oneDiv) // <div class="container">text here</div>

前述したようにtextContentメソッドでは、新しいテキスト、classListが追加されます.addメソッドを使用すると、oneDivにcontainerというクラスが追加されます.ここで、textContentメソッドに加えて、テキストを挿入する方法は次のとおりです.

innerHTML:セグメントのHTMLを取得またはリセットできます.この方式は直接ラベルを含み,XSS(Cross-Site Scripting)攻撃を受けやすいため,セキュリティの問題がある.

innerText:ユーザーが表示するテキストを該当する領域で読み込みます.特定のノードにレンダリングされたテキストを取得するときに便利です.

テキスト内容:ラベルが何であれ、ノードのテキストが読み出されます.性能と安全性の面でのメリットは、使用することをお勧めします.

DELETE
最後に、要素を削除する方法です.

oneDiv.remove() 

上記のようにして生成された1つのエンティティを削除できます.複数のサブエレメントを削除する場合は、どうすればいいですか?次の方法を使用できます.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

上記の例では、removeChildメソッドを使用して、すべてのサブエレメントが消えるまで、最初のサブエレメントを削除します.
リファレンス
MDN - DOM