22.12.01 DOM 기초

DOM(Document Object Model)

1. javacript

• 브라우저에서 쓰려고 만들어진 JS
• 본연의 역할 :
  • 웹페이지를 동적으로만들기 위해
  • HTML문서를 조작해서 만들어진 언어

2. 웹페이지가 뜨는과정

1) 클라이언트 -> 서버(요청)
2) 서버 -> 클라이언트(HTML 문서를 수신)
3) 브라우저가 HTML 파일을 해석(parsing(분석))
4) DOM Tree를 구성
5) HTML에 CSS 포함시 CSSOM Tree를 구성(중요x)
6) DOM Tree랑 CSSOM Tree를 합쳐서 Rendering Tree

3. DOM

• Document를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling한거
• 브라우저에 기본적으로 내장돼 있는 API
• DOM이 브라우저에 내장돼있기 때문에
  1. 접근할 수 있다.
  2. 제어할 수 있다.
• 모든 DOM의 node(DOM Tree의 마디)들은 '속성', 'Method' 보유

4. 용어정리

1. 탐색

document.childNodes // (childeNode는 여러개 있을수도있음 -> childNodes)
// 하위 노드로 가기

document.parentNode // (parentNode는 단 한개 -> parentNode)
// 상위 노드로 가기

document.getElementById('id') // (id는 단 한개 -> Element)
//id명이 'id'인 요소 선택

document.getElementsByClassName('class') // (class는 여러개 있을수도있음 -> Elements)
// 클래스명이 'class'인 요소들 선택

document.querySelector('#id | .class')
// id나 클래스 선택 그러나 아이디인지 클래스인지 구분해줘야함

const div = document.createElement('div')
document.body.append(div);
// 새로운 노드 생성

2. 속성변화

• innerHTML과 innerText

element.innerHTML = new html content
element.innerText = new text

element.innerHTML : 따옴표안의 태그도 인식함
element.innerText : 따옴표안의 것들을 모두 텍스트로 인식

• 스타일 변경

element.style.property = new style

• attribute(속성)

element.setAtrribeute(attribute, value)

• document.write('')
  페이지를 싹다 덮어씀 쓸때 주의

• addEventListner

//version 01
element.addeventlistner('click', myFunction);
function myFunction() {
   document.getElementByID("demo").innerHTML = "Hello, World!"
}
// version 02
element.addeventlistner('click',function() {
   document.getElementByID("demo").innerHTML = "Hello, World!"
});