728x90
문서 객체 모델
자바스크립트를 이용하여 웹 문서에 접근하고 제어할수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
웹문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다.
ex)웹 문서 전체는 document 객체, 삽입한 이미지는 image 객체 입니다.
DOM 트리
웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것 입니다.
나무 형태가 되기 때문에 "DOM 트리"라고 합니다.
- 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목입니다.
- 루트 노드(root node) : DOM 트리의 시작 부분 (HTML)
DOM을 구성하는 원칙
- 모든 HTML 태그는 요소(element)노드
- 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text) 노드
- 태그의 속성은 요소 노드의 자식 노드인 속성(attribute) 노드
- 주석은 주석(comment)노드
DOM 요소에 접근하기
웹 문서에서 원하는 요소를 찾아가는 것을 "접근한다(access)"라고 합니다.
getElementById() 메서드
기본형 )
요소명.getElementById("id"명)
getElementsByClassName() 메서드
기본형)
요소명.getElementByClassName("class"명)
getElementsByTagName()메서드
기본형)
요소명.getElementsByTagName("태그명")
반환값이 두개 이상일수 있기에 s가 붙습니다
HTMLCollection 객체에 저장 됩니다.
querySelector()메서드, querySelectorAll() 메서드
기본형)
노드.querySelector(선택자)
노드.querySelectorAll(선택자 or 태그)
- querySelector() 메서드는 한개의 값만 반환 합니다.
- querySelectorAll() 메서드는 반환 값이 여러개 일때 모두 반환하여 노드 리스트로 저장됩니다
- id 이름 앞에는 해시 기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명을 사용합니다.
innerText, innerHTML 프로퍼티
웹 요소의 내용을 수정하는 프로퍼티입니다.
innerText : 텍스트 내용을 지정합니다.
innerHTML : HTML 태그 까지 포함해서 텍스트 내용을 지정 합니다.
기본형)
요소명.innerText = 내용
요소명.innerHTML = 내용
코드를 이용한 예시는 다음과 같습니다.
<body>
<button onclick="inntext()">innerText로 표시하기</button>
<button onclick="innHTML()">innerHTML로 표시하기</button>
<h1>현재 시각: </h1>
<div id = "current"></div>
<script>
var now = new Date();
function inntext(){
document.getElementById("current").innerText = now;
}
function innHTML(){
document.getElementById("current").innerHTML = "<em>" + now + "</em>";
}
</script>
728x90
'JAVA SCRIPT' 카테고리의 다른 글
| 자바스크립트 기본!(문서객체모델, DOM - 3) - Java Script (0) | 2022.12.19 |
|---|---|
| 자바스크립트 기본!(문서객체모델, DOM - 2) - Java Script (0) | 2022.12.19 |
| 자바스크립트 기본!(객체5. 브라우저 관련 객체) - Java Script (0) | 2022.12.16 |
| 자바스크립트 기본!(객체4. Math객체) - Java Script (0) | 2022.12.16 |
| 자바스크립트 기본!(객체3. Date 객체..) - Java Script (0) | 2022.12.16 |