2021_03_18

TIL-DOMの理解と操作

1.DOMの理解

ドキュメントオブジェクトモデルとは?
HTML(Document)にアクセスしてオブジェクトを処理するようにHTMLを操作するモデルという意味を持つ.

2.操作DOM

DOMが何であるかが分かれば、DOMの操作方法について説明します.
まず、この授業では基本的なCREATE(CREATE、READ、UPDATE、DELETE)を紹介します.
1.CREATE
createElementメソッドを使用してdiv要素を作成する

const tweetDiv = document.createElement('div')

しかし、このように書いてもhtml画面は変わりません.どうしてこんなことになったの?
APPENDを使用して作成した要素を構造に接続してこそ、画面に表示されるからです.

document.body.append((tweetDiv)

画面には表示されませんが、consoleウィンドウにdiv divという要素が作成されています.
2.READ
「tweet」という名前のクラスをクエリーするには、そうしなければなりません.

const oneTweet = document.querySelector('.tweet')

「tweet」というクラスが1つではなく複数インポートする必要がある場合

const tweets = document.querySelectorAll('.tweet')

先ほど作成したelement containerの最後のサブアイテムに追加するには

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

3.UPDATE
最後のサブ要素として追加したelementにidを付与し、テキストを追加しようとします.

tweetDiv.classList.add('tweet')
tweetDiv.textContent = 'div'
//tweetDiv.innerHTML = 'div'

これによりdivボックスが画面に表示されます.
上を見るとtweetDivinnerHTML=が「div」と注釈されていることがわかります.まず、これは上のテキストの内容と同じ機能です.しかし、開発者はinnerHTMLをあまり使用しません.どうしてこんなことになったの?
まずinnerHTMLとtextContentの違いを理解します.
textContentには、ドキュメント内のテキストのみが含まれます.しかし、innerHTMLの特徴は、テキストだけでなく、ドキュメントに悪意を持って植え込まれたハッカースクリプトも読み取ることです.そのため、XSS攻撃を受ける可能性が高くなり、安全性も低下する.したがって、innerHTMLではなくテキストコンテンツを使用することをお勧めします.
4.DELETE

tweetDiv.remove()

では、どのようにして子供の愛を削除しますか?

document.querySelector('#container').innerHTML = '';

実はこのようにするのが最も簡単で最も簡単です.ただし、InnerHTMLはセキュリティ上の問題があることを示します.

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

前に示したように、サブエレメントがないまで、繰り返し文を使用して繰り返し削除できます.
今日はDOMの理解と操作を学びました.
明日はtwitter関数の作成を勉強します.
今日はここまで~!