문서 객체 모델 The Document Object Model
DOM 이란 XML이나 HTML 문서에 접근하기 위한 방법을 제공한다. 프로그래밍 언어는 제공된 방법에 따라 XML이나 HTML 문서의 문서 구조, 스타일, 내용 등을 변경할 수 있다.
DOM 요소 선택
자바스크립트에서 HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야 한다. 특정한 요소를 선택하기 위해서 제공되는 방법은 여러가지가 있다.
[JS] 도큐먼트 탐색 메소드 Document
도큐먼트 Document Document 객체란 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 Document 객체의 수많은 속성과 메소드를 사용할 수 있다. 그 중 HTML 요소를 탐색하는 메..
mintparc.tistory.com
DOM 요소의 변경
HTML DOM을 사용하면 해당 문서의 구조, 스타일, 내용 등을 변경할 수 있다.
- createElement
새 엘리먼트를 추가해준다.
document.createElement("div");
- style
선택된 요소의 style을 변경해준다.
/*HTML*/
<p id="a">자바 스크립트</p>/*JavaScript*/
var str = document.getElementById("a");
str.style.color = red;
- innerHTML
선택된 요소의 내용을 변경해준다.
/*HTML*/
<p id="a">자바 스크립트</p>/*JavaScript*/
var str = document.getElementById("a");
str.innerHTML = "JavaScript";
// 자바스크립트가 JavaScript 로 바뀐다.
댓글