[SIST] Web_javascript_days07/days08_DOM, BOM

1. DOM(Document Object Model)

1. DOM?
- Document Object Model의 약자
- 웹 페이지를 요청 -> 응답 -> 브라우저에 응답된 웹페이지가 로딩할 때 [DOM 객체]를 생성
- 트리 구조로 된 객체

2. DOM 사용
- html 요소 추가, 수정, 삭제
- html 속성 추가, 수정, 삭제
- css 스타일 변경
- html 이벤트 추가, 수정, 삭제
  등등

3. W3C DOM 종류
1) Core DOM - 모든 문서 유형에 대한 표준 DOM
2) html DOM - ex05.html
3) xml DOM - test.xml

4. DOM 메서드
 ㄱ. html 요소를 찾는 메서드
  document.getElementById()
  document.getElementsByTagName(tagname)
  document.getElementsByClassName(className)
  document.getElementsByName(name)
 
 ㄴ. html 요소 변경
  element.innerHTML = 
  element.innerText =
  element.속성명 =
  element.style.속성명 =
  element.setAttribute(속성명, 속성값);
  element.getAttribute(속성명); -> 속성값을 가져올 때
 
 ㄷ. html 요소 동적 추가, 수정, 삭제
  document.createElement();
  document.appendChild();
  document.removeElement(요소); -> 요소를 삭제할 때
  document.removeChild(); - 자식 요소를 제거할 때
  document.replace(new, old); -> 새로운 요소로 바꿀 때
 
 ㄹ. 이벤트를 처리할 때
  element.on이벤트명 = function(){}
 
 ㅁ. 요소를 가져오는..

   document.links / document.images
   document.scripts 컬렉션 == 모든 script 요소를 가져오는 컬렉션
   document.forms
   document.body == body 요소
   document.documentElement == html 요소 **
   document.doctype == !DOCTYPE 선언문
   document.head == head 요소
   document.title == title 요소
   등등

---

2. HTML 문서의 DOM 탐색

1. html 문서의 모든 것은 Node(노드) 이다.

2. 전체 문서를 나타내는 것을 문서 노드
   요소를 나타내는 노드는 요소 노드(element node)
   속성을 나타내는 노드는 속성 노드(attribute node)
   텍스트를 나타내는 텍스트 노드(text node)
   주석처리를 나타내는 주석처리 노드(comment node)

3. 모든 노드들은 관계가 있다.
[부모(parent) - 자식(child) 관계]
- parentNode
- childNode

[형제 관계]
- nextElementSibling : 다음 형제 요소
- nextSibling : 다음 형제 노드
- previousElementSibling : 이전 형제 요소
- previousSibling : 이전 형제 노드

 

[자식 노드]
- 첫 번째 자식 노드 : firstChild
- 마지막 자식 노드 : lastChild

4. 노드들 간의 탐색할 때 자주 사용되는 속성
1) parentNode 속성 : 부모노드를 찾아옴
2) childNodes 속성 : 자식노드목록  nodeList
3) firstChild 속성 : 첫번째 자식 노드
4) lastChild 속성 : 마지막 자식 노드
5) nextSibling 속성 : 다음 형제 노드
6) previousSibling 속성 : 이전 형제 노드

---

3. 각각의 노드에 있는 속성 3가지

1. nodeName 속성

[각 노드별 반환값]
- 요소노드 : 태그명
- 속성노드 : 속성명
- 텍스트노드 : #text
- 주석노드 : #comment

 2. nodeType 속성

[각 노드별 반환값]
- 요소노드 : 1
- 속성노드 : 2
- 텍스트노드 : 3
- 주석노드 : 4
- 루트노드(== html 태그) : 5
- 선언문노드 : 6

3. nodeValue 속성

[각 노드별 반환값]
- 요소노드 : null
- 속성노드 : 속성값
- 텍스트노드 : 문자열 자체

 

예시)

---

4. DOM 예제

예제1)

* 주석처리된 부분을 하나씩 해제하면서 확인~

---

예제2) 체크 박스를 체크한 후 체크된 사원명을 p태그(demo)에 출력하기

> 주석처리한 과정들을 통해서 엔터를 치면 textNode가 생성이 되기 때문에 엔터를 치지않거나 노드 또는 요소들을 잘 가져오는지 확인하는 것이 필수!

> 현재 코딩에서는 요소로 가져오면 더 편리하게 가져올 수 있다!

---

예제3) 동적으로 공지사항을 웹페이지 로딩시 추가 및 새로운 공지사항 추가하기

[style]

 

[body태그 뼈대]

 

[script 코드]

- 하나의 공지사항의 모양은 아래와 같음

 

1) 공지사항을 웹페이지 로딩시 출력하는 코딩

 

2) 새로운 공지사항 추가하는 코딩\

- 위의 코딩과 다른 점은 data[i].type을 $("#type").val()로 바꾼 것

 

[결과]

공지사항 타입 선택 후 내용을 입력한 뒤 공지사항 추가 버튼을 누르면 새로운 공지사항이 잘 추가된다.

---

5. BOM(Browser Object Model)

1. Browser Object Model = 브라우저 객체 모델의 약어

2. 브라우저와 상호작용하여 정보를 얻거나 설정

3. BOM 종류
 1) window 객체
   - 브라우저의 창을 나타낸다.
   - 모든 브라우저에서 제공한다.
   - 최상위 부모 객체이다.
   - 전역변수, 함수를 선언하면 자동으로 window 객체의 구성원이 된다.

2) screen 객체

  - 사용자 화면에 대한 정보를 가지고 있는 객체

3) location 객체

  - 윈도우(창) 위치 정보를 나타내는 객체

  - 현재 페이지의 주소(url) 얻기

  - 현재 페이지의 주소(url)를 새로 설정하여 이동

4) navigator 객체

  - 사용자 브라우저 정보를 갖고 있는 객체

5) history 객체

  - 브라우저의 기록을 포함하고 있는 객체(이전페이지, 다음페이지 등)

  - 현재 띄워진 브러우저가 어떤 페이지를 거쳐서 왔는지 등등 역사를 의미

  - 사용자의 개인 정보를 보호하기 위해 접근 방법이 제한적이다.

---

1) window 객체

- window.innerWidth : 브러우저의 내부 너비(단위 : px)를 나타냄

- window.innerHeight : 브러우저의 내부 높이(단위 : px)를 나타냄

* 도구 모음, 스크롤바 등을 포함하지 않는 순수한 너비/높이를 나타냄

 

- window.open() : 새로우 창 열기

 

- window.close() : 현재창 닫기

 

- window.moveTo(), window.mobeBy() : 현재 창 이동

- window.resizeTo(), window.resizeBy() : 현재 창 크기 조절

* To : 위치/크기를 고정

   By : 현재 기준 위치에서 부여한 값만큼 이동/증가

 

- window.alert() : 경고창을 띄우는 메서드

 

- window.confirm() : 확인 대화 상자를 띄우는 메서드, 확인은 true 취소는 false를 돌려줌

 

- window.prompt() : 사용자의 입력 값을 받는 대화상자를 띄우는 메서드, 입력을 한 후에 확인 버튼을 누르면 입력 값을 돌려주고 취소를 누르면 null을 돌려줌

 

* 참고 : 요소의 크기 가져오기

- 브라우저에 따라서 둘 중에 하나의 코드가 적용됨
// body 태그
document.body.clientWidth;
document.body.clientHeight;

// html 태그 - IE5,6,7,8
document.documentElement.cliendtWidth;
document.documentElement.cliendtHeight;

---

예시)

> 새 창 열기 버튼을 누르면 새로운 창이 열리고 창 닫기를 누르면 창이 닫힌다.

여기서 새 창을 누르면 ex07_03.html 파일이 열리는데 이 안에서 위치와 크기 관련된 예시를 다루겠다.

 

[ex07_03.html]

---

예시)

- 확인을 누르면 자기자신 창을 닫음

---

---

2) screen 객체

- screen.width : 스크린(화면) 너비

- screen.height : 스크린(화면) 높이

- screen.availWidth : 사용 가능한 스크린 너비(도구모음, 작업표시줄 등을 제외한 화면의 너비) 

- screen.availHeight : 사용 가능한 스크린 너비(도구모음, 작업표시줄 등을 제외한 화면의 높이)

- screen.colorDepth : 색농도
       16비트 : 65,536가지
       32비트 : 42억 가지

 

예시)

 

[결과]

---

3) location 객체 / history 객체

- location.hosthom : 도메인 이름 반환

 

- location.protocol : 사용된 웹 프로토콜 반환(통신규약)

 

- location.port : 포트 번호 반환

 

- location.href : 새로운 주소로 설정하고 이동하는 속성

- location.assign() : 새로운 주소로 설정하고 이동하는 메서드

* href와 assign의 차이점은 속성이냐 메서드이냐

 

- history.back() : 이전 페이지로 이동 == history.go(-1)

 

- history.forward() : 다음 페이지로 이동 == history.go(1)

 

예시)

 

- ex01_03.html 링크를 누르면 이전 페이지로 이동 하는 버튼이 있는 html 문서로 이동

- 이전 페이지로 이동 버튼 클릭 시 다시 아래 화면으로 돌아옴

---

4) navigator 객체

- navigator.appName : 사용자가 사용한 브라우저의 응용프로그램 이름을 반환

 

- navigator.appCodeName : 브라우저의 응용프로그램의 코드이름을 반환

 

- navigator.product : 브라우저의 엔진 이름을 반환

 

- navigator.cookieEnabled : 브라우저의 쿠키 사용 여부를 true, false로 반환

 

- navigator.javaEnabled : java 활성화 여부를 반환

 

- navigator.platform : 브라우저의 플랫폼(운영체제) 이름을 반환

 

예시)

---

[참고] 이전에 DOM, BOM 정리했던 글

https://yelin1217.tistory.com/273

[SIST] Web_javascript_days05/days06