프론트엔드 로드맵 17 - 자바스크립트 DOM 조작 방법

DOM 이란?

The Document Object Model, 즉 문서 객체 모델을 말한다. 이 모델은 HTML과 XML 문서가 작동하는 기본 틀이다. DOM은 프로그래밍 언어가 DOM 구조를 잘 파악하여 접근한 뒤 문서의 스타일 및 내용을 변경할 수 있도록 한다.

자바스크립트 같은 스크립팅 언어는 DOM를 수정할 수 있다.

 

자바스크립트는 인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트를 로딩시켜 DOM에 접근한다.

 

<DOM에 쓰이는 공통 API>

document.getElementByID(아이디명)

document.getElementsByTagName(태그명)

document.createElement(생성될 요소명)

parentNode.appendChild(생성될 자식의 요소명)

element.innerHTML //특정 요소의 html 내용을 불러온다

element.style.left // 요소의 스타일(왼쪽 위치)을 불러온다

element.setAttribute(변경할 타겟, 변경 내용) // 요소의 attribute(속성)을 정한다

 (document.getElementsByTagName("H1")[0].setAttribute("class", "demo") >> 첫번째 h1요소의 class에 demo라는 클래스를 추가한다)

element.getAttribute // 요소의 attribute(속성)값 반환.

 (let div1 = document.getAttribute("div1"); )

element.addEventListener // 요소에 이벤트를 생성한다

window.onload

window.scrollTo