03. DOM

💎DOM (Document Object Model)

• 문서 객체 모델
• HTML , XML들의 문서를 액세스 하는 표준을 정의

• DOM은 w3c 에서 HTML , XML 문설를 다루는 표준 (인터페이스)을 정의한 것
• DOM 에 정의된 표준에 대한 구현은 브라우저 제조사 , 프로그래밍 언어 개발사 , 라이브러리 개발자가 담당
• 브라우저 종류나 프로그래밍 언어의 상관없이 동일한 API 로 구현되어 있다

DOM 특징

• 모든 엘리먼트는 객체다.
• 모든 엘리먼트의 프로퍼티를 정의하고 있다.
• 엘리먼트를 엑세스하는 메소드를 정의하고 있다.
• 모든 엘리먼트의 이벤트를 정의하고 있다.

DOM 주요객체

Document - 웹브라우저 HTML 문서를 로딩 했을 때 , Document  객체가 된다
Element - HTML 의 태그를 표현하하는 객체다 , Document   객체에는 현재 로딩된 HTML문서 모든 태그에 대한 Eleme
Attr - HTML 태그의 속성을 표현하는 객체
HTMLCollection - Element 객체를 여러개 포함할 수있는 배열 유사객체
Event - 사용자가 웹 페이지와 상호 작용 할때 마다 엘리먼트에서 발생되는 객체

브라우저 내장객체 ( Brower Object Model , BOM)

최신 브라우저는 자바스크립트 상호 작용을 위해 거의 동일한 메서드 및 속성을 가지고 있는 브라우저 내장객체를 제공한다

• Window Object
  1. 웹 브라우저의 창을 표현하는 객체다 ( 우리가 보고있는 브라우저)
  2. 전역객체다 → 웹페이지의 스크립트 태그에서 작성하는 모든변수 , 모든 메서드는 Window Object에 담긴다
  3. 다른 BOM ( Browser Object Model ) 객체를 모두 포함하고 있는 객체다
     
     
     
• Document Object
  1. HTML 문서를 표현하는 객체다
  2. Document Object가 제공하는 API를 이용해서 웹페이지의 태그 , 컨텐츠를 조작할 수 있다.
     
     
     
• Screen Object
  1. 사용자 환경의 디스플레이 정보를 표현하는 객체다
  2. Screen Object가 제공하는 API를 이용해서 브라우저나 디스플레이 중앙에 위치시킬 수 있다.
     
     
     
• Location Object
  1. 현재 페이지의 URL 정보를 표현하는 객체 , 주소창의 URL 정보를 표현하는 객체다
  2. Location Object가 제공하는 API임을 이용해서 주소를 변경해서 다른 페이지로 이동할 수 있다.
     
     
     
• History Object
  1. 웹 페이지 방문이력 정보를 표현하는 객체다
  2. History Object가 제공하는 API를 이용해서 이전페이지 , 다음 페이지로 이동할 수 있다.
     
     
     
• Navigator Object
  1. 사용자의 웹 브라우저 정보를 표현하는 객체
  2. Navigator Object 가 제공하는 API 를 이용해서 웹 브라우저 정보를 조회 할 수 있다

Element 객체

• 프로퍼티 (멤버변수)
  • tagName 태그명이 저장되어있다
  • nodeType 노드 타입이 저장되어 있다
  • textContent 태그의 텍스트 컨텐츠가 저장되어 있다.
  • innerHTML 태그의 내부 HTML 컨텐츠가 저장되어 있다
  • id 태그의 id 속성값이 저장되어 있다
  • style 태그의 css 속성 값이 저장되어 있다

<div id="box" class="border bg-light p-3">
    <h3>연습</h3>
    <p>연습 입니다</p>
</div>

 - tagName = "DIV"
 - nodeType = 1
 - textContent = "연습" , "연습 입니다"
 - innerHTML = <h3>연습</h3>  <p>연습 입니다</p>
 - id = box
 - classList = ["border" , "bg-light" , "p3"]
 - style  =  style 객체

아이디 속성값이 intro 인 엘리먼트를 찾아서 반환한다

document.getElementById("intro");

아이디 선택자로 아이디 속성값이 intro 인 엘리먼트를 찾아서 반환한다

document.querySelector("#intro");

태그명이 "p" 인 모든 엘리먼트를 찾아서 반환

document.getElementsByTagName("p");

태그 선택자로 태그명이 "p"인 모든 엘리먼트를 찾아서 반환

document.querySelectorAll("p");

클래스 속성값이 "box-text"인 모든 엘리먼트를 찾아서 반환한다

document.getElementsByClassName("box-text");

클래스 선택자로 클래스 속성값이 "box-text" 인 모든 엘리먼트를 찾아서 반환

document.querySelectorAll("box-text");

document.querySelectorAll("#intro > p");