[javascript] BOM / DOM

BOM
(Browser Object Model)

 

location 객체

브라우저 주소창과 관련된 객체 =>  url(href 속성)

굳이 <a>태그 아니더라도 url이동을 할 수 있게 해주는 객체이다.

가능하면 속성에 직접 접근하기보다 location 객체의 메소드를 이용하는 방법을 권장한다.

 

 

- assign(), replace() : 페이지 이동

replace()는 url이동 후 뒤로가기가 되지 않는다.

 

 

- reload() : 새로고침 (= window.onload)

 

 

 

screen 객체

가로, 세로, 해상도등의 화면 정보를 조회할 수 있는 객체

 

 

 

navigator 객체

사용자가 사용중인 브라우저에 대한 정보(제조사)에 대한 정보가 담겨있는 객체

 

---

DOM
(Document Object Model)

 

HTML에 있는 각각의 태그(요소)들을 Node(노드)라고 한다.

- 요소노드 (Element Node) : 태그 그 자체만을 의미 == Element

- 텍스트노드 (Text Node) : 태그 내에 기록되는 내용 == Content

 

텍스트노드가 존재하는 요소(시작태그와 종료태그가 한쌍으로 이루어져있는 요소) : div, button, a, h1, p

텍스트노드가 존재하지 않는 요소(시작태그로만 이루어져있는 요소) : input, img ....

 

 

 

- 텍스트 노드가 존재하는 노드 생성하기 (시작태그 + 종료태그)

1. elementNode 객체 생성 : document.createElement('태그명');

=> 요소노드 객체

 

2. textNode  객체 생성 : document.createTextNode('문구');

=> 텍스트노드 객체

 

3. 요소노드.appendChild(텍스트노드);

두 개의 노드를 연결(요소노드의 하위로 텍스트노드 추가)

=> 요소노드의 자식으로 텍스트노드를 추가하겠다.

 

 

 

- 텍스트노드가 존재하지 않는 노드 생성 (시작태그만 존재)

 

 

 

객체의 속성에 접근하는 방법 : 객체명['속성명'] 또는 객체명.속성명

 

 

- 노드 삭제

지우고자하는 요소객체명.remove();

area4요소의 첫번째자식인 첫번째 img가 삭제된다