- BOM, DOM2024년 08월 21일
- chantleman
- 작성자
- 2024.08.21.:52
BOM 브라우저 객체 모델
- 최상위 객체는 window
- 전역 객체
- 모든 객체가 소속된 객체
window에 속하는 하위 객체
- location : url에 대한 정보 제공
- history : 방문 기록 정보 제공
- document: dom
- navigator: 브라우저와 운영체제에 대한 정보 제공
- screen: 사용자 환경의 디스플레이 정보 제공
- open() / close(): 새로운 창 열고 닫기
- (opener() : open()을 통해 새로운 창을 열었을 때 그 자식창에서 부모 창을 가리킬 때 opener라고 함)
- alert()
- confirm()
- prompt()
- setTimeout(함수, ms): 주어진 시간이 경과하면 지정된 함수 호출
- clearTimeout(object) : setTimeout() 중지
- setInterval(함수, ms) : 주어진 시간이 경과할 때마다 지정된 함수 호출
- clearInterval(object) : setInterval() 중지
- ...
DOM 문서 객체 모델
- W3C의 표준
- 문서를 액세스하기 위한 표준 정의
- 프로그램 및 스크립트를 동적으로 액세스하여 문서의 콘텐츠, 구조 및 스타일을 갱신할 수 있도록 하는 플랫폼 및 언어 중립 인터페이스
- HTML문서의 계층적인 구조를 tree로 표현
DOM(Document Object Model, 문서 객체 모델)
- Document와 관련된 객체들의 집합
>> 브라우저가 웹 문서를 이해하도록 구성된 문서 객체 모델
- 웹 문서를 객체화하여 각 요소별로 구조화 한 것
>> 이 요소들은 상/하위 또는 병렬구조로 체계화 되어있다 (=트리구조, 부자관계 형성)
DOM API(DOM에 액세스하고 상호 작용하기 위해 JavaScript에서 사용하는 인터페이스)
- 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공
>> 웹 문서의 컨텐츠, 구조, 스타일을 읽고 조작할 수 있음
- getElementById, getElementsBy...
- querySelector / querySelectorAll
- createElement
- appendChild : Node객체만 대상 / 한번에 하나의 Node객체만 추가 가능 / 리턴 값 반환
- append(appendTo) : Node객체 및 DOM String(text) 대상 / 한번에 여러 자식요소 설정 가능 / 리턴 값 반환하지 않음
- getAttribute / setAttribute 등
==== DOM과 DOM API을 통해 HTML요소에 액세스하고 제어한다 ====
[DOM TREE 구조]
★Document(9)
ㄴDocumentType(10) <!DOCTYPE HTML>
ㄴ★Element(1)
ㄴ★Attribute(2) alt="30"
ㄴEntity(6,x) < 의 lt
ㄴEntityReference(5,x) < 의 & ;
ㄴ★Text(3)
ㄴComment(8)
ㄴCDATASection(4) <![CDATA[]]> 특수문자,비교연산자 등을 문자열로 인식하도록 처리하는 구문
ㄴNotation(12,x) <font color="#ffff00" size="10px"> ==> #ffff00, 10px
- Document Node: 문서 전체를 나타내는 트리 최상단. 하위로 접근하기 위한 시작점
- Text Node: 태그 내 텍스트, 요소 노드의 자식이자 돔 트리의 최종단
- (노드 유형을 지정하는 정수 중 )5, 6, 12번은 더 이상 사용되지 않음
[Node와 Element 차이]
Node : Element Node + Text Node 전체를 가리킨다
Element : Text Node를 제외하고 Element만 가리킨다DOM은 node의 계층 구조로 이루어져있고, node는 여러 유형이 존재한다.
element도 node의 유형 중 하나로 element는 node에 포함되는 개념이다.
DOM 조작시 node를 탐색하는 방법과 element를 탐색하는 방법이 존재한다.
- node 탐색: 여러 node유형들(comment, text 등)이 모두 탐색됨
- element 탐색: node 유형 중 element node만을 대상으로 탐색
동적인 웹페이지를 작성하기 위해 원하는 요소 찾기
- id로 찾기: document.getElementById();
- name으로 찾기 : document.getElementsByName()[idx];
- class로 찾기 : document.getElementsByClassName()[idx];
- tag로 찾기 : document.getElementsByTagName()[idx];
(id로 찾기를 제외한 name, class, tag로 찾기 메소드들은 여러 개의 요소를 찾아 배열로 반환하므로 사용할 대상 항목의 index를 꼭 지정해야 함)
- document.querySelector();
- document.querySelectorAll();
(찾는 대상이 id일 때 ‘#’, class일 때 ‘. ’ 를 붙여 검색하며, 요소(태그)일 때는 요소 명 그대로 작성.
querySelector()로 여러 대상 요소가 검색된 경우 첫번째 요소만 반환 )DOM 트리 순회
- parentNode : 현재 노드의 부모 노드 반환
- childNodes : 모든 자식 요소를 배열로 반환
- firstChild : childNodes 배열의 첫번째 자식 노드 반환
- lastChild : childNodes 배열의 마지막 자식 노드 반환
- nextSibling : 현재 노드의 다음 형제 노드 반환
- previousSibling: 현재 노드의 이전 형제 노드 반환
- nodeName : 노드 이름 반환
- nodeValue : 노드의 값 반환
- tagName : 요소 이름 반환
- textContent : 텍스트 반환
새로운 요소 생성
- createElement(tagName) : 태그 요소 생성
- createTextNode(text) : 텍스트 노드 생성
- appendChild(node) : 새로운 노드를 마지막에 추가
- removeChild(node) : 부모 노드와의 관계가 끊어짐
- remove() : 노드 삭제
728x90'js' 카테고리의 다른 글
팝업 (0) 2024.08.28 href, replace()를 이용한 페이지 이동 (0) 2024.08.22 window.onload를 활용한 lotto예제 (0) 2024.08.21 random (1) 2024.08.20 rest parameter (0) 2024.08.12 다음글이전글이전 글이 없습니다.댓글