DOM이 무엇이고 왜 필요할까?

HTML과 CSS(HTML->CSS)

CSS 적용 방법
1. inline style
2.<style>tag
3. css파일 분리(.css)

HTML과 JavaScript(HTML->JavaScript)

JavaScript 적용 방법
1.<script>tag
2.javascript파일분리(.js)

DOM (JavaScript → HTML)

• DOM(Document Object Model)이란? 문서 객체 모델
  • D(Document): 웹 페이지 문서(= HTML)
  • O(Object): 객체
  • M(Model): 모델

DOM은 HTML을 계층화시켜 트리(Tree) 구조로 만든 객체(Object) 모델(Model)입니다.

• 자바스크립트에서 동적 기능 구현을 위해 HTLM 웹 페이지에 접근
• 자바스크립트 로직을 통해 동적 웹 페이지를 구현하기 위해서는 우선 HTML 요소에 접근해야 합니다.

DOM 조작하기

💭 innerHTML- 내용(content) 조작

// HTML body 태그에 접근하여 내용 조작
document.body.innerHTML = '내용 다 바꿈';

💭style - 스타일 조작

// id가 'NM_NEWSSTAND_HEADER'인 요소 취득 >> 변수에 저장
const element = document.getElementById('NM_NEWSSTAND_HEADER');

// 해당 요소의 스타일 조작
element.style.backgroundColor = 'blue';

💭createElement - 요소 생성

// h1 요소 생성 및 내용 추가
const item = document.createElement('h1'); // <h1></h1>
item.innerHTML = '제목추가' // <h1>제목추가</h1>

// h1 요소를 추가하고 싶은 위치 취득
const newsHeader = document.getElementById('NM_NEWSSTAND_HEADER'); 

// newsHeader자식으로 item 추가
newsHeader.appendChild(item);

💭요소의 속성(attribute) 조작

// 요소에 id 수정(추가)
element.id = 'newId';

// 요소에 class 수정(추가)
element.className = 'newClass';

// 요소 스타일 수정(추가)
element.style.backgroundColor = "red";