티스토리 뷰
39.1 노드
39.1.1 HTML 요소와 노드 객체
-DOM: html 문서의 트리구조와 정보를 표현하며, 이를 제어할 수 있는 javascript API이다.
39.1.1 HTML 요소와 노드 객체
- html 태그는 tag(element), attribute, contents?, endtag?로 이루어 진다.
- html의 element는 eletmet node 객체로 변환되고, attribute는 attribute node, text contents는 text node로 변환된다.
- contents에는 다른 element가 들어올 수 있다.
- DOM은 tree 자료구조를 가진다. 이를 DOM tree라고 부르며, root에는 document node가 존재한다.
- 공백 텍스트노드: 뒤에 나온다.
39.1.2 노드 객체의 주요 타입 4가지와 나머지 8개 **
1) 문서노드 document node - root node이며, html전체를 가리킨다. window.document로 참조한다. html문서에서 document는 하나로 유일하다.
2) 요소노드 element node - 각 엘리먼트를 나타낸다. 문서의 구조를 표현한다.
3) 어트리뷰트노드 attribute node - 어트리뷰트 노드는 해당 어트리뷰트가 지정된 element node와 결합한다. attribute node 끼리는 계층적 구조가 아니다. 그냥 해당하는 element에 붙어있을 뿐이다.
4) 텍스트노드 text node - 자식을 가질 수 없는 leaf node(말단)이다. 직접접근할 수 없고, text노드를 가지는 element node를 타고 접근한다.
5) comment, Document Type, DocumentFragment, .. 8개의 나머지 노드는 추가로 따로 알아봐라.
39.1.3 노드 객체의 상속 구조
** DOM을 구성하는 node 객체는 빌트인 객체가 아니라 호스트 객체다! **
- Object -> EventTartget(이벤트를 발생시키는 객체. add remove EventListener) -> Node(트리자료구조의 객체. parentNode, childerenNodes, previouseSibling, nextSibling 등의 트리탐색 메서드 사용 가능) -> Document, Element, Attr, CharacterData
- Document는 HtmlDocument의 부모
- Element(웹문서의 요소를 표현)는 HtmlElement(웹문서중 Html의 요소를 표현 style 프로퍼티등이 들어있음)의 부모이고 HtmlElement는 일반적인 element의 부모이다.
- Attr은 그냥 그 자체이다.
- CharaterData는 Text와 Comment의 부모이다.
- 상속구조를 통해, input element object는 부모들의 prototype을 상속받아 모든 프로퍼티와 메서드를 사용할 수 있다.
** 이 모든 것들이 DOM API에서 제공하는 것들이다. 이를 통해 동적으로 HTML 문서를 조작한다. **
** 개발자 도구에서 특정 노드를 선택해 properties를 봐보자. **
**프론트엔드 개발자는 HTML을 DOM과 함께 보는 것에서부터 시작한다.**
39.2 요소 노드 취득
39.2.1 id를 이용한 요소 노드 취득
39.2.2 태그 이름을 이용한 요소 노드 취득
39.2.3 calss 선택자를 이용한 요소 노드 취득
39.2.4 css 선택자를 이용한 요소 노드 취득
39.2.5 특정 요소 노드를 취득할 수 있는지 확인
39.2.6 HTMLCollection과 NodeList
39.3 노드 탐색
39.3.1 공백 텍스트 노드
39.3.2 자식 노드 탐색
39.3.3 자식 노드 재 확인
39.3.4 요소 노드의 텍스트 노드 탐색
39.3.5 부모 노드 탐색
39.3.6 형제 노드 탐색
39.4 노드 정보 취득
39.5 요소 노드의 텍스트 조작
39.5.1 nodeValue
39.5.2 textContent
39.6 DOM조작
39.6.1 innerHTML
39.6.2 insertAdjacentHTML 메서드
39.6.3 노드 생성과 추가
39.6.4 복수의 노드 생성과 추가
39.6.5 노드 삽입
39.6.6 노드 이동
39.6.7 노드 복사
39.6.8 노드 교체
39.6.9 노드 삭제
39.7 어트리뷰트
39.7.1 어트리뷰트 노드와 attributes 프로퍼티
39.7.2 HTML 어트리뷰트 조작
39.7.3 HTML 어트리뷰트 vs DOM 프로퍼티
39.7.4 data 어트리뷰와 dataset 프로퍼티
39.8 스타일
39.8.1 인라인 스타일 조작
39.8.2 클래스 조작
39.8.3 요소에 적용되어 있는 CSS 참조
39.9 DOM 표준
**태그사이에 들어가는 text는 class가 text였던 것 같다..?**