HTML 태그(DOM) 접근하기

DOM

DOM은 HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서이다. 웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 통해 여러 가지 조작이 가능하다.

DOM 접근 메서드

html 요소들을 이용하기 위해서는 메서드를 통해 특정 태그에 접근해야 한다.

• document.getElementById("id명") : 해당 id명을 가진 요소 하나를 반환한다.
• document.querySelector("선택자") : 해당 선택 자를 만족하는 요소 하나를 반환다.
• document.getElementsByClassName("class명")[순서] : 해당 태그 명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환한다.
• document.querySelectorAll("선택자명")[순서] : 해당 선택 자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환한다.

See the Pen dom by pminsun (@pminsun) on CodePen.

 

요소 접근 속성과 document.write 메서드

요소에 접근하면 요소의 여러 가지 속성에 접근하여 변경 할 수 있다.

• element.innerHTML : 해당 요소를 다른 HTML요소로 변경할 수 있는 속성이다.
• element.style.property : 해당 요소에 적용된 css 속성의 값을 나타낸다.
• element.attribute : 해당 요소의 속성을 나타낸다.
• document.write() : 인자로 전달한 내용을 DOM에 그릴 수 있다.

See the Pen 요소 접근 속성 by pminsun (@pminsun) on CodePen.