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

DOM이란

웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있음. DOM은 HTML인 웹페이지와 스크립팅언어(JS)를 서로 잇는 역할.

JS는 document라는 전역객체를 통해 HTML에 접근. JS의 document 객체는 DOM 구조를 접근하는 관문. document 객체는 HTML 문서를 나타낸다고 말할 수 있음.

.innerHTML

요소의 내부를 수정함.

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

.style.

스타일 수정 시 사용. css프로퍼티 명을 '.'뒤에 붙여서 조작. css프로퍼티 명에 '-'가 들어간 경우 카멜케이스로 작성.

// 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와 같은 결과가 나옴)