📝DOM (Document Object Model)

D : 웹 페이지 문서(HTML)
O : 객체
M : 모델

DOM은 HTML을 계층화시켜 트리 구조로 만든 객체모델이다.
DOM은 웹 페이지 문서, 즉 HTML과 자바스크립트를 서로 잇는 역할임
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와준다.

자바스크립트 코드에서 document라는 변수로 접근이 가능!

🍄 DOM 접근하기

👉 getElementsByTagName

tag 이름을 이용한 요소 취득 가능!

const pTags = document.getElementsByTaName('p');

해당 페이지에 있는 모든 p 태그가 배열의 형태로 담겨서 반환된다.

👉 querySelector

CSS 선택자를 이용한 요소 노드 취득

const el = document.querySelector('category_item');

category_item 이라는 클래스를 사용하는 첫 번째 요소 반환
getElementByTagName 메서드를 사용한 것과 달리, 배열이 아닌 요소를 반환한다.

👉 getElementById

id를 이용한 요소 취득

const element = document.getElementById('NM_NEWSSTAND_HEADER');

id가 NM_NEWSSTAND_HEADER인 요소가 반환된다.

👉getElementsByClassName

class를 이용한 요소 취득

const element = document.getElementsByClassName('category_item');

해당페이지에 있는 class 이름이 category_item인 모든 요소가 배열의 형태로 담겨서 반환된다.

🍄 DOM 조작하기

👉 innerHTML - 내용(content)조작

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

innerHTML을 통해 요소의 내용, 즉 시작 태그와 종료 태그 사이의 내용에 접근하여 수정 가능.
body 태그에 접근하여 내부 내용을 '내용 바꾸기' 라는 문자열로 조작.
body 태그 자식 요소가 많더라도 innerHTML을 사용하면 안의 내용이 전부 교체된다.

👉 style - 스타일 조작

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

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

HTML 요소의 style에 접근하여 스타일을 조작할 수 있다.
HTML 페이지에 접근하여 id가 NMNEWSSTAND_HEADER인 요소를 취득하여 element 변수에 저장하였다.
해당 요소의 style에 접근하여 배경색을 blue로 바꾸었다.
DOM에 접근하여 스타일을 수정하는 경우는 _camelCase를 사용해야한다.

👉 createElement - 요소 생성

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

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

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

.createElement(tagName) 함수를 사용하면 HTML 요소를 생성할 수 있다.
생성한 h1 요소에 innerHTML을 통해 내용을 설정해주었다.
요소는 생성만 됐을 뿐, HTML에 추가된 상태가 아니라 눈으로 확인할 수는 없다.
특정 요소의 자식 요소로 append 시키는 방법은 appendChild 이다!
id가 NM_NEWSSTAND_HEADER인 요소를 찾아서(newsHeader), 자식으로 item을 추가한다.

👉 요소의 속성(attribute) 조작

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

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

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

document 객체로 특정 요소에 접근할 수 있듯이, 요소의 속성에도 접근이 가능하다.
특정 요소의 속성에 접근하여 id, 혹은 class도 추가하고 style 값도 수정할 수 있다.