HTML DOM(Document Object Model)
웹 페이지에 작성된 HTML 태그 당 객체(DOM 객체) 생성
목적 : HTML 태그가 출력된 모양이나 콘텐츠를 제어하기 위해
- DOM 객체를 통해 각 태그의 CSS3 스타일 시트 접근 및 변경
- HTML 태그에 의해 출력된 텍스트나 이미지 변경
DOM 트리의 특징
- DOM 트리의 루트는 document 객체
- DOM 객체의 종류는 HTML 태그 종류만큼
- HTML 태그 당 DOM 객체가 하나씩 생성
- HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계
HTML 태그
* 엘리먼트(element)로도 불림
DOM 객체는 5 개의 요소 구성
- 프로퍼티(property) : HTML 태그의 속성(attribute) 반영
- 메소드(method) : DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
- 컬렉션(collection) : 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
- 이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너 반영
- CSS3 스타일 : HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영, DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능
DOM 객체 다루기
- DOM 객체 구분, id 태그 속성
| <p id="firstP">안녕하세요</p> |
- DOM 객체 찾기, document.getElementById()
| var p = document.getElementById("firstP"); // id 값이 firstP인 DOM 객체 리턴 p.style.color = "red"; // p 객체의 글자 색을 red로 변경 |
- DOM 객체의 CSS3 스타일 동적 변경
| <span id="mySpan" style="color:red">문장입니다.</span> var span = document.getElementById("mySpan"); // id가 mySpan인 객체 찾기 span.style.color = "green"; // ‘문장입니다’의 글자 색을 green으로 변경 span.style.fontSize = "30px"; // ‘문장입니다’의 폰트를 30px 크기로 변경 span.style.border = "3px dotted magenta"; // 3픽셀의 magenta 점선 테두리 |
<span>의 CSS3 스타일 동적 변경
innerHTML 프로퍼티
시작 태그와 종료 태그 사이에 들어 있는 HTML 컨텐츠
innerHTML 프로퍼티 수정 -> HTML 태그의 콘텐트 변경
this 키워드 : 객체 자신을 가리키는 자바스크립트 키워드
DOM 객체에서 객체 자신을 가리키는 용도로 사용
예) <div> 태그 자신의 배경을 orange 색으로 변경
| <div onclick="this.style.backgroundColor='orange'"> |
예) 버튼이 클릭되면 자신의 배경색을 orange로 변경
| <button onclick="this.style.backgroundColor='orange'"> |
document 객체
HTML 문서 전체를 대변하는 객체
* 프로퍼티 - HTML 문서의 전반적인 속성 내포
* 메소드 - DOM 객체 검색, DOM 객체 생성, HTML 문서 전반적 제어
DOM 객체를 접근하는 경로의 시작점
DOM 트리의 최상위 객체
* 브라우저는 HTML 문서 로드 전, document 객체를 먼저 생성
* document 객체를 뿌리로 하여 DOM 트리 생성
document 객체 접근
* window.document 또는 document 이름으로 접근
* document 객체는 DOM 객체가 아님
DOM 트리에서 DOM 객체 찾기
태그 이름으로 찾기
* document.getElementsByTagName()
class 속성으로 찾기
* document.getElementsByClassName()
document.write()와 document.writeln()
write()
document 객체에 담긴 HTML 콘텐츠 마지막에 HTML 태그들을 추가
- 추가되는 HTML 태그들은 DOM 객체로 바뀌고 DOM 트리에 추가
- 삽입된 HTML 태그들이 브라우저 화면에 출력
| document.write("<h3>Welcome to my home</h3>"); document.write(2+3); // 합한 결과 5 출력 document.write("<p>오늘은 " + "sunny day 입니다</p>"); |
writeln()
- HTML 텍스트에 '\n'을 덧붙여 출력. 한 칸 띄는 효과
document의 열기와 닫기, open()과 close()
- document.open()
현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지 시작. 즉 document 객체에 담긴 DOM 트리를 지우고 새로 시작
- document.close()
현재 브라우저에 출력된 HTML 페이지 완성
더 이상 document.write() 할 수 없음
| // 현재 HTML 페이지의 내용을 지우고 다시 시작 document.open(); document.write(“<html><head>...<body>안녕하세요.”); document.write(“.......”); document.write(“</body></html>”); document.close(); |
문서의 동적 구성
DOM 객체 동적 생성: document.createElement("태그이름")
태그이름의 DOM 객체 생성
| var newDIV = document.createElement("div"); newDIV.innerHTML = "새로 생성된 DIV입니다."; newDIV.setAttribute("id", "myDiv"); newDIV.style.backgroundColor = "yellow"; |
DOM 트리에 삽입
부모.appendChild(DOM객체);
부모.insertBefore(DOM객체 [, 기준자식]);
| var p = document.getElementById("p"); p.appendChild(newDiv); |
DOM 객체의 삭제
var removedObj = 부모.removeChild(떼어내고자하는자식객체);
| var myDiv = document.getElementById("myDiv"); var parent = myDiv.parentElement; parent.removeChild(myDiv); // 부모에서 myDiv 객체 삭제 |
'Java & Python' 카테고리의 다른 글
| 웹 클라이언트, 웹 서버 라이브러리 (0) | 2023.09.18 |
|---|---|
| [Djang] 정의 (0) | 2023.09.18 |
| [React] - Router (0) | 2023.09.13 |
| [React] - 상태 관리 라이브러리(Context API, Redux) (0) | 2023.09.12 |
| [React] - 생명주기 (0) | 2023.09.12 |