그룹스터디 [Browser: DOM]

DOM (Document Object Model)

• 웹페이지 내용(HTML)의 객체 요소.
• 브라우저들은 사용자가 띄운 웹 문서를 구성과 내용에 맞게 객체화한다.
• 각 요소(element)별로 구조화한다.
• 이 요소들은 상, 하위 구조나 병렬 구조로 체계화된다.
• 웹 문서에 대한 모든 내용을 담고있는 객체이다.
• DOM은 JS를 통해 dynamic하게 변경 가능하다.
• DOM은 HTML 문서를 node tree로 나타낸다.
  • NODE : 트리 구조에서 데이터 상,하위 계층을 나타내는 위치의 항목.

 

DOM Tree 구조에서 자주 사용되는 노드

• 문서 노드 (Document Node)
  • 트리 최상위에 존재하며 하위 요소들에 접근하기 위한 starting point.
• 정보 노드 (CharacterData Node)
  • DOM 트리의 최종단.
• 요소 노드 (Element Node)
  • TAG(태그)
• 어트리뷰트 노드 (Attribute Node)
  • Input 태그 안에 name, value 등의 속성을 가리키는 노드

 

 

 

DOM을 통한 요소 접근 방식

제어대상 호출(querySelector)

• document.getElementById('id') 
  • id 속성으로 검색 , 객체 (한개, HTML Element 객체)
• document.getElementsByClassName('class')
  • class 속성으로 검색 , 배열 (여러개, HTML Collection객체)
• document.getElementsByTagName('tag')
  • 태그 이름으로 검색 , 배열 (여러개, HTML Collection 객체)
• document.querySelector('선택자[ex).title, #title]')
  • 선택자에 해당하는 첫번째 요소만 선택 , 객체(한개, HTMl Element 객체)
• document.querySelectorALL('선택자')
  • 선택자에 해당하는 모든 요소들을 선택 , 배열 (여러개, HTML Collection 객체)

 

document 메소드들

• document.characterSet
  • 문자 인코딩 반환하는 속성
• document.title
  • 문서의 제목을 가져오거나 변경하는 속성
• document.write()
  • 문서에 문자, 코드 등을 쓰는 메서드
• document.writeIn()
  • write()와 다르게 띄여쓰기 기호가 들어감

 

 

 

 

요약

• createElement - CREATE
• querySelector, querySelectorAll - READ
• textContent, id, classList, setAttribute - UPDATE
• remove, removeChild, innerHTML = "" , textContent = "" - DELETE
• append, appendChild - APPEND
• innerHTML과 textContent의 차이

 

 

+reference

https://velog.io/@bungouk6829/Javascript

Javascript Window객체, BOM , DOM