Web(Front) - HTML & DOM

📒 HTML과 DOM

1️⃣ DOM (Document Object Model)

• HTML과 XML문서의 구조를 정의하는 API 제공
• 문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현
• 즉, HTML 문서 내용을 조작할 수 있는 API로 HTML 계층구조 형식의 객체로 표현
• 계층 구조 제일 위에는 document 노드 존재
  • 아래에 HTML 태그 or 요소(element)를 표현하는 노드 존재
  • 아래에 문자열을 표현하는 노드 존재
• HTML 문서의 검색과 조작(추가, 수정, 삭제) 가능

2️⃣ DOM 문서 계층 구조

• Document : HTML or XML 문서 표현
• HTMLDocument : HTML 문서와 요소만 표현
• HTMLElement 하위 타입 : 단일 요소 or 요소 집합의 속성에 해당하는 JS 프로퍼티 정의
• Comment 노드 : HTML or XML의 주석 표현
• 계층 구조

  Node
  - Document
  	- HTMLDocument
  - Element
  	- HTMLElement
  		- HTMLHeadElement
  		- HTMLBodyElement
  		- HTMLTitleElement
  		- HTMLParagraphElement
  		- HTMLInputElement
  		- etc ...
  - Attr
  - CharacterData
  	- Text
  	- Comment
  

3️⃣ 문서 객체 만들기

• text node를 갖는 객체와 갖지 않는 객체로 나뉨
  • createElement(tagName) : element node 생성
  • createTextNode(text) : text node 생성
  • appendChild(node) : node를 child로 추가
• 객체의 속성 설정
  • setAttribute(name, value) : 객체 속성 지정
    • 웹 브라우저가 지원하지 않는 태그의 속성도 가능 (즉, 사용자 정의 속성도 사용 가능)
  • getAttribute(name) : 객체 속성값 가져옴
• innerHTML & innerText
  • innerHTML : 문자열을 HTML 태그로 삽입
  • innerText : 문자열을 text node로 삽입

4️⃣ 문서 객체 가져오기

• getElement
  • getElementById(id) : id와 일치하는 element 객체 얻기
  • getElementsByClassName(class-name) : class-name과 일치하는 element 배열 얻기
  • getElementsByTagName(tag-name) : tag-name과 일치하는 element 배열 얻기
  • getElementsByName(name) : name과 일치하는 element 배열 얻기
• querySelector
  • querySelector(selector) : selector에 일치하는 첫 번째 element 객체 얻기
  • querySelectorAll(selector) : selector에 일치하는 모든 element 배열 얻기

5️⃣ 문서 객체 제거

• 객체 제거
  • removeChild(childnode) : 객체의 자식 노드 제거