자바스크립트

DOM과 BOM

그레고리력 2021. 7. 16. 00:01

DOM(Document Object Model)

  • 웹페이지를 자바스크립트로 제어하기 위한 객체 모델(문서에 대한 모든 내용을 담고 있음)
  • 텍스트 파일의 문서를 브라우저가 이해할 수 있는 구조로 구성한 것 → HTML 요소의 관계를 반영하여 모든 노드들을 트리구조로 구성한 것
  • HTML뿐 아니라 다양한 마크업 언어를 제어하기 위한 모델, 문서의 구조화된 표현으로 프로그래밍 언어가 DOM구조에 접근해 문서 구조, 스타일 등을 변경할 수 있도록 함
  • Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.
  • 웹에서 발생하는 수많은 이벤트(Event)는 모두 자바스크립트의 객체, 이런 Document 객체(요소)로 구성된 하나의 웹 페이지는 Window를 최상위로 하는 트리를 생성, 각각의 이벤트(객체)는 전파 경로(propagation path)를 따라 전파

제어의 대상에 해당되는 객체를 찾는 것

  • document.getElementsByTagName : 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환
  • 만약 조회의 대상을 좁히려면 특정 객체를 지정(ul.getElementsByTagName('li'))
  • document.getElementsByClassName : class 속성의 값을 기준으로 객체를 조회
  • document.getElementById: id 값을 기준으로 객체를 조회
  • document.querySelector : css 선택자의 문법을 이용해서 객체를 조회
  • document.querySelectorAll : 모든 객체를 조회

jQuery

  • DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구
  • $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴
  • $('li').css('color', 'red');

HTMLElement

  • 객체를 조회했다면 구체적인 작업을 처리하기 위해서 획득한 객체가 무엇인지 알아야 한다.
  • document.getElementById : 리턴 데이터 타입은 HTMLLIELement
  • document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection(유사배열, 리턴 결과가 복수일 때 )
  • HTMLCollection의 목록은 실시간으로 변경(일부 원소를 제거한 후 재조회할 필요 없이 자동 반영)
  • 태그의 성격과 쓰임에 따라 객체가 다르다 → HTMLLIElement, HTMLAnchorElement, HTMLInputElement
  • DOM Tree: 모든 엘리먼트는 HTMLElement의 자식
  • HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.

jQuery 객체

  • jQuery 함수의 리턴값, jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체
  • 암시적 반복 : 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리
  • 두 번째 인자가 있으면 설정, 없으면 가져오는 것
  • 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환
  • 체이닝 : chainig이란 선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법
  • map은 jQuery 객체의 엘리먼트를 하나씩 순회, 첫번째 인자로 엘리먼트의 인덱스, 두번째 인자로 엘리먼트 객체(DOM)이 전달

Element 객체

  • 엘리먼트를 추상화한 객체
  • DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격
  • 주요기능 : 식별자, 조회, 속성
  • 식별자
  • Element.tagName
  • Element.id
  • Element.className
  • Element.classList
  • 조회 API: 엘리먼트를 조회하는 기능
  • Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행
  • 속성: HTML에서 태그명만으로는 부족한 부가적인 정보
  • setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속성이라고 부르겠다)이고 후자는 property 방식
  • property 방식은 좀 더 간편하고 속도도 빠르지만 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있다
Attribute와 property 차이
  • attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소
  • 예를 들어, <div class= ‘my-class’></div>라는 ‘my-class’라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 ‘my-class’ 는 class attribute의 value(값)
  • property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현
  • attribute는 html document/file 안에서 property 는 html DOM tree안에서 존재
  • attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 것을 내포
  • 예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 됩니다.
  • attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미

Node 객체

  • 모든 DOM 객체는 Node 객체를 상속 받는다
  • Node 관계 API : Node.childNodes, Node.firstChild(공백, 줄바꿈 등 영향), Node.lastChild, Node.nextSibling, Node.previousSibling
  • 노드 종류 API : nodeType, nodeName
  • 노드의 종류에 따라서 정해진 상수가 존재
  • 노드 변경 API
  • 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 함 : document.createElement(tagname), document.createTextNode(data)
  • appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가
  • insertBefore(newElement, referenceElement) : 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가
  • removeChild(child), replaceChild(newChild, oldChild)
  • jQuery 노드 변경 API : Manipulation 카테고리
  • 추가, 제거, 바꾸기, 이동, 복사

Document 객체

  • window 객체의 property
  • Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다.
  • HTMLDocument 객체는 문서 전체를 대표하는 객체, DOM 트리 최상위 객체
  • document 객체의 주요 임무는 새로운 노드를 생성해주는 역할 : createElement(), createTextNode()
  • 문서 정보 API

Text 객체

  • 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다.
  • DOM에서는 공백이나 줄바꿈도 텍스트 노드
  • 값 API : data, nodeValue
  • 조작 API : appendData(), deleteData(), insertData(), replaceData(), subStringData()

문서의 기하학적 특성

  • 요소(element)의 크기와 위치, Viewport, 스크롤, 스크린의 크기

DOM API

  • 브라우저에서 제공하는 api 중 하나로 자바스크립트로 웹 페이지를 동적으로 조작 가능

랜더링 과정

  • css 태그를 상단에 위치하는 이유 : 스타일 시트를 최대한 빨리 다운 받고 cssom 트리가 구성되어야 랜더링을 하기 때문에 흰 화면 응시 시간을 줄이기 위해
  • script 태그가 하단인 이유 : 스트립트 태그를 만나면 파싱을 멈추고 스크립트를 읽기 때문, 생성되지 않은 DOM 노드를 조작하는 것이 불가능하기 때문

BOM(Browser Object Model)

  • 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
  • 즉 닫기 창이나 검색창 등 브라우저 틀에 관련된 부분을 제어
  • 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어

Window 객체

  • 모든 객체가 소속된 객체이고, 전역객체이면서, 창이나 프레임을 의미

HTML

  • form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공
  • prompt : 사용자에게 값을 입력받음

Location 객체

  • 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티
  • console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)
  • URL 변경하기 가능(다른 url로 이동)

Navigator 객체

  • 브라우저의 정보를 제공하는 객체
  • console.dir(navigator);
  • appName, appVersion, userAgent, platform

창 제어

  • window.open 메소드는 새 창을 생성