[JS]DOM(innerHTML, style,createElement,appendChild,className)

DOMとは

WebページのHTMLを階層化し、ツリー構造のオブジェクトモデルを形成します.JavaScriptでは、このモデルを使用してWebページにアクセスおよび変更できます.DOMはHTMLページとスクリプト言語(JS)を接続する.

JSはdocumentというグローバルオブジェクトからHTMLにアクセスする.JSにおける文書オブジェクトはDOM構造にアクセスするゲートである.ドキュメントオブジェクトはHTMLドキュメントを表すことができます.

.innerHTML

要素の内部を変更します.

// body태그 내부의 내용이 모두 대체됨
document.body.innerHTML = '내용 다 바꿈';
// 변수 할당 후 사용
let blueElement = document.querySelector('.blue');
blueElement.innerHTML = '여기만 내용 바꿈';

.style.

スタイルを変更するときに使用します.css property名は「.」後付け操作css property名に「-」が含まれている場合はcamel caseを使用して作成します.

// class blue의 글자색 blue로 바꿈
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

.createElement('tagName')

要素を作成する関数

.appendChild

要素の末尾に追加された関数(innerHTMLとの違い!)

// p요소를 만들고 h1의 끝에 추가
let createP = document.createElement('p');
let $h1 = document.getElementsByTagName('h1')[0];
createP.innerHTML = 'DOM';
$h1.appendChild(createP);

.className

classを追加します(.classList.addに似ています!)

createP.className = 'dom'; // 클래스가 이미 있으면 덮어쓰기함
element.className += ' 이름'; // 기존클래스에 추가(띄어쓰기 포함해서 사용하면 classList.add와 같은 결과가 나옴)