예제 8-1. DOM 객체의 구조 출력 : p 객체 사례
WEB/JAVASCRIPT-CONCEPT 2017. 10. 30. 13:15 |* HTML 태그의 출력과 DOM 객체
HTML 태그로부터 먼저 DOM 객체를 생성하고 DOM 트리를 구성한 후, DOM 객체를 화면에 출력한것이다.
* DOM 객체들 사이의 관계
DOM 객체들
- parentElement 프로퍼티 : 부모 객체
- chileren 프로퍼티 : 직계자식들의 컬렉션
- firstElementChild 프로퍼티 : 첫 번째 직계 자식
- lastElementChile 프로퍼티 : 마지막 직계 자식
sibling
- previousElementSibling 프로퍼티 : 왼쪽 sibling 객체
- nextElementSibling 프로퍼티 : 오른쪽 sibling 객체
예제 8-1. DOM 객체의 구조 출력 : p 객체 사례
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML DOM 트리</title> </head> <body> <h3>DOM 객체 p의 프로퍼티, 스타일, 이벤트 리스너</h3> <hr> <p id="firstP" style="color:blue; background:yellow" onclick="this.style.color='teal'">이것은 <span style="color:red">문장입니다.</span> </p> <script> var p = document.getElementById("firstP"); // id가 firstP인 태그의 DOM 객체 찾기 var text = "p.id = " + p.id + "\n"; text += "p.tagName = " + p.tagName + "\n"; text += "p.innerHTML = " + p.innerHTML + "\n"; text += "p.style.color = " + p.style.color + "\n"; text += "p.onclick = " + p.onclick + "\n"; text += "p.childElementCount = " + p.childElementCount + "\n"; text += "너비 = " + p.offsetWidth + "\n"; text += "높이 = " + p.offsetHeight + "\n"; alert(text); </script> </body> </html> | cs |
* W3C에서 표준화한 DOM 객체의 주요 공통 프로퍼티, 컬렉션, 메소드
(프로퍼티)
기본
id // 태그의 id 속성 값
lang // 태그의 lang 속성 값
style // style 객체에 대한 레퍼런스
title // 태그의 title 속성 값
tagName // 태그 이름 문자열. 항상 대문자로 표시됨 예) SPAN, Div
innerHTML // 시작 태그와 종료 태그 사이의 HTML 텍스트
DOM 트리관련
childElementCount // 자식 DOM 객체 개수
firstElementChild // 첫 번째 자식 객체
lastElementChild // 마지막 자식 객체
nextElementSibling // 다음 형제 객체, 오른쪽 형제
parentElement // 부모 객체
previousElementSibling // 이전(왼쪽) 형제 객체
크기와 위치
offsetHeight // 패팅, 테두리, 스크롤바를 포함한 높이
offsetWidth // 패팅, 테두리, 스크롤바를 포함한
offsetLeft // 객체의 출력 위치. 수평 옵셋
offsetTop // 객체의 출력 위치. 수직 옵셋
(컬렉션)
children // 자식 DOM 객체들의 컬렉션(자식들을 가리키는 레퍼런스 배열)
(메소드)
addEventListener() // 새로운 이벤트 리스너 등록
appendChild() // 마지막 자식 뒤에 새로운 자식 추가
click() // 사용자가 마우스를 클린한 것과 동일한 작업 수행
focus() // 키 입력을 받을 수 있도록 이 객체에 포커스 지정
setAttribute() // 속성 추가
insertBefor() // 지정된 자식 앞에 새 자식 추가
querySelector() // 지정된 CSS3 셀렉터와 일치하는 첫 번째 자식 리턴
removeChild() // 자식 삭제
replaceChild() // 자식 대체
removeEventListener() // addEventListener()로 등록한 이벤트 리스너 제거
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 8-3. innerHTML을 이용하여 HTML 콘텐츠 동적 변경 (0) | 2017.10.30 |
|---|---|
| 예제 8-2. 자바스크립트로 <span>태그의 CSS3 스타일 동적 변경 (0) | 2017.10.30 |
| 예제 7-9. new Object()로 계좌를 표현하는 account 객체 만들기. 예제 7-10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기 (0) | 2017.10.30 |
| 예제 7-8. Math를 이용한 구구단 연습 (0) | 2017.10.30 |
| 예제 7-7. string 객체의 메소드 활용 (0) | 2017.10.28 |