TIL 10. DOM

1. DOM (Document Object Model)

1- 1. 概念と意義
DOM(dom)は,ウェブページのHTMLを階層化し,ツリー構造を形成するオブジェクトモデルである.
JavaScriptでは、このモデルを使用してWebページにアクセスしたり、ページを変更したりできます.
DOMはHTMLページとスクリプト言語(JavaScript)を相互接続する役割を果たす.
https://storage.googleapis.com/replit/images/1554697886215_4cc30fbcee76455dc6061ef47279a2a1.pn
JavaScriptはdocumentというグローバルオブジェクトからHTMLにアクセスできます

2.なぜHTMLにアクセスするのですか?

https://storage.googleapis.com/replit/images/1554696792180_4109f19a3b5f31133dd4ecde0659adb5.pn
2-1. Element and Attribute, Content
ドキュメント・オブジェクトを使用すると、HTMLで直接カテゴリを作成するのではなく、DOMツリーのルート・ノードにユーザーがアクセスできます.APIを使用してサーバからカテゴリ・リストのデータを取得するようにします.
documentオブジェクトを使用して要素にアクセスするように、要素のプロパティ(attribute)にもアクセスできます.
これによりclass、idを追加したり、styleを変更したりすることができます.
要素のコンテンツ(コンテンツ)は、innerHTMLでアクセスおよび変更できます.

document.body.innerHTML = '내용 다 바꿈';

以上、bodyタグの内部の内容を「内容すべて置換」テキストに置き換えます.bodyラベルに多くの要素が含まれている場合でも、innerHTMLを使用してすべてのコンテンツを置き換えます.エレメントにアクセスするにはどうすればいいですか?tag、class、idなどのcssセレクタからアクセスできます.
2-2. Style

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

これはcssで使用される属性名background-color대신 **backgroundColor**으로 접근한다. **JavaScript에서 style 수정할 때 hypen(-)은 사용할 수 없다. ** 객체(Object)에서 프로퍼티 이름에 hypen(-`が使用できない理由と同じです.
そのため、styleの番組に近づきたい場合はcamelcaseに変更します.
2-3. Create a Element.createElement(tagname)関数を使用すると、要素(element)を作成できます.
上の関数は要素を作成するだけで、HTMLのどの部分に入るかはまだ指定されていません.
したがって、作成後に要素にアタッチする必要があります.innerHTMLが完全に置換されている場合、appendChild関数は要素の後ろに貼り付けられます.
2-4. 例
const newP= document.createElement("p");//新しい<p></p>``를 만든다. newP.className = "class"; // newP.innerHTML = "DOM"; //DOM document.body.appendChild(newP); //를 ```タグ内にあります.
}