マイニング[JS]DOM(Documentオブジェクトモデル)


DOMとは?


Domはドキュメントオブジェクトモデルの略です.
WebページのHTMLを階層化し,ツリー構造を生成するオブジェクトDOMがHTMLページとスクリプト言語(JavaScript)を接続する.
きれいなDocumentオブジェクトモデル構造
ドーム構造を見ると、世界中の気分が悪くなります

HTMLにアクセスしてみましょう



Documentオブジェクト


Documentでは、DOMツリーのルートノードにアクセスできます.documentオブジェクトを使用して要素にアクセスするのと同様に、要素のプロパティにアクセスしたり、class、id、styleを変更したりすることができます.

すべての要素にアクセスしたい場合は、


bodyラベル内にどれだけの要素があるかにかかわらず、body.innerHTMLを使用してすべての内容を置き換えます.
document.body.innerHTML = '내용 다 바꿈!!!';

エレメントにアクセスしたい場合は、


tag、class、idなどのcssセレクタからアクセスできます.
スタイルを変更することもできます.以下に示すように、cssのpropertyとは少し違います.
Javascriptでスタイルを変更する場合、-は使用できません.camelCaseは使用できます.
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

Elementを作成する場合は、

.createElement()または.createTagName()を使用して、要素を生成することができる.また、要素を作成した場合.必要な場所にappendChild()を使用して追加する必要があります.