문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
요약하자면 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을
object 자료로 정리한걸 DOM이라고 부름.
문서 객체 모델 (Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식
DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스
DOM은 문서의 구조화된 표현(structured representation)을 제공하여
프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함
웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다.
예를 들어 document object 는 document 자체를 의미하며,
table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것
//출처 : https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
API (web or XML page) = DOM + JS (scripting language)
브라우저는 HTML 문서를 위에서 부터 읽으며 DOM을 생성.
그래서 Javascript코드를 HTML파일에서 작성할때
요소 '아래!'에 작성하는 것.
자바스크립트는 DOM이 생성된 경우에만 HTML을 변경할 수 있다.
하지만 자바스크립트 실행을 나중으로 미룰 수도 있따.
** 요즘은 그냥 자바스크립트를 <body>태그 끝나기 전에 전부 작성한다.**
$(document).ready(function(){ 실행할 코드 })
document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('test').innerHTML = '안녕'
})
</script>
<p id="test">임시글자</p>요렇게
DOM과 관련하여 알아두면 좋은 함수!
load 이벤트 리스너
이 함수를 사용하면 DOM 생성뿐만 아니라 이미지, css, js파일이 로드가 됐는지도 체크가능하다.
셀렉터로찾은이미지.addEventListener('load', function(){
//이미지 로드되면 실행할 코드
})$(window).on('load', function(){
//document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
});
window.addEventListener('load', function(){
//document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드
})이런식으로 사용.
HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법
모든 HTML 요소는 HTML DOM을 통해 접근 가능
Document 객체 : Document 객체는 웹 페이지를 의미
웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시! Document 객체부터 시작해야 함
Document 메소드 : HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
HTML 요소의 선택 : 새로운 HTML 요소를 선택하기 위해 제공되는 메소드
HTML 요소의 생성
HTML 이벤트 핸들러 추가
DOM의 트리 구조 (HTML → DOM)
DOM 활용 예제
[JavaScript/자바스크립트] DOM의 활용
DOM 요소의 선택 DOM 요소의 스타일 변경 DOM 요소의 내용 변경 *'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성 및 발췌 했습니다.
hans-j.tistory.com
-코딩애플 강의를 듣고 작성하는 글입니다.
*'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성 및 발췌 했습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript]웹개발시 자주 사용하는 메서드들 (1) | 2023.02.01 |
|---|---|
| [JavaScript]로컬스토리지 (1) | 2023.01.30 |
| [JavaScript]배열 정렬하기 feat. sort, map, filter /리액트 응용 (0) | 2023.01.30 |
| [JavaScript]Ajax란? (0) | 2023.01.29 |
| [JavaScript]이벤트 버블링 (1) | 2023.01.28 |
