DOM (Document Object Model)

DOM(dom)は,ウェブページのHTMLを階層化し,ツリー構造を形成するオブジェクトモデル(ツリー構造は親子関係からなる構造)である.JavaScriptでは、このモデルを使用してWebページにアクセスしたり、ページを変更したりできます.DOMは、HTMLページとスクリプト言語(JavaScript)を接続する役割です.

JavaScriptはどのようにHTMLにアクセスしますか?documentという名前のグローバルオブジェクトから直接アクセスできます.JavaScriptの文書オブジェクトはDOM構造へのアクセスの関門であり,文書オブジェクトはHTML文書を表す.

なぜHTMLにアクセスするのか:Elementsへのアクセスと変更

Market Callieのサイトでは、カテゴリリストをHTMLに「肉や野菜など…」手書きがない.APIを使用してサーバからカテゴリリストのデータを取得します.

documentオブジェクトを使用すると、DOMツリーのルートノードにアクセスできます.documentオブジェクトを使用して要素にアクセスするように、要素のプロパティ(attribute)にもアクセスできます.これによりclass、idを追加したり、styleを変更したりすることができます.要素のコンテンツ(content)は、innerHTMLにアクセスおよび変更できます.

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

上にはbodyラベルの内部の内容を「内容がすべて置換されている」に変換したテキストがあります.bodyラベルに多くの要素が含まれている場合でも、innerHTMLを使用してすべての内容を置き換えます.特定の要素にアクセスするには、tag、class、idなどのcssセレクタを使用します.

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

前述したように、スタイルはcssで使用されるプロパティ名とは少し異なるように変更することもできます.background-colorの代わりにbackgroundColorで接近する.JavaScriptでスタイルを変更する場合、ハイフン(-)は使用できません.これは、「オブジェクト」(Object)がProperty名にハイフン(-)を使用できない理由と同じです.だから、styleの番組に近づきたいときはcamelcaseに変えるべきです.

要素の作成

要素を作成することもできます..createElement(tagName)関数を使用して要素を作成します.上の関数は要素を作成するだけで、HTMLのどの部分に入るかはまだ指定されていません.作成後、エレメントにアタッチする必要があります.innerHTMLがコンテンツを完全に置き換えた場合、appendChild関数は要素の後ろに貼り付けられます.

// 요소 생성
let listWrap = document.createElement('ul');
let list = document.createElement('li');
let listContent = document.createElement('span');

listContent.innerHTML = "목록이다";
list.appendChild(listContent); // list 안의 제일 마지막에 listContent를 붙임
listWrap.appendChild(list); // listWrap 안의 제일 마지막에 list를 붙임

document.body.appendChild(listWrap); // body태그 내 제일 마지막에 listWrap을 붙임