DOM (Document Object Model)
JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법
<html>
```
<body>
<div id="security" class="info blue">
값이 들어있습니다
<span>자식이 들어있습니다</span>
<span>자식이 여럿 들어있습니다</span>
</body>
```
</html>| 속성 | 속성에 대한 값 |
| 태그 이름 | div |
| id | security |
| class | info, blue |
| 안쪽에 담긴 내용 | 값이 들어있습니다 <span>자식이 들어있습니다</span> <span>자식이 여럿 들어있습니다</span> |
| 부모 엘리먼트 | body |
| 자식 엘리먼트 | span, span |
자료출처 : 코드스테이츠
HTML 문서의 구조와 관계를 객체(Object)로 표현한 모델
트리 구조
-
HTML 문서도, JavaScript 객체도 둘 다 트리 구조
document라는 전역변수로 접근이 가능
| 속성 | 속성 이름 |
| 태그 이름 | tagName |
| id | id |
| class 목록 | classList |
| class 문자열 | className |
| 속성 객체 | attributes |
| 스타일 객체 | style |
| 엘리먼트에 담긴 내용 | innerHTML, innerText, textContent |
| form 입력 값 | value |
| 자식 엘리먼트 | children |
| 부모 엘리먼트 | parentElement |
| 자식 노드 | childNodes |
| data-* 속성에 담긴 값 | dataset |
| 이벤트 | onclick, onmouseover, onkeyup 등 |
| 좌표 정보 (기준점에 따라 다름) | offsetTop, offsetLeft scrollTop, scrollLeft clientTop, clientLeft |
| 크기 정보 (기준점에 따라 다름) | offsetWidth, offsetHeight scrollWidth, scrollHeight clientWidth, clientHeight |
자료출처 : 코드스테이츠
'CodeStates > └ DOM' 카테고리의 다른 글
| DOM 명령어 (0) | 2020.07.06 |
|---|---|
| DOM 조작 (<template> 태그) (0) | 2020.07.06 |
| DOM 조작 (메소드) (0) | 2020.07.06 |
| DOM 조작 (inner HTML) (0) | 2020.07.06 |
| DOM (클릭 이벤트) (0) | 2020.07.06 |
댓글