Javascript : DOM

모던 자바스크립트 Deep Dive를 통해 진행중인 자바스크립트 스터디 3주차 이번주 내가 발표한 내용은 DOM이다. 그 중에서도 여러 노드들의 차이점, getter를 가지는 프로퍼티, getter와 setter를 함께 가지는 프로퍼티 등을 구분하여 발표하였다. 구분만 하고 보니 내용이 적은 느낌적인 느낌느낌... 책을 보고 정리한거지만 제 생각이 들어가면서 잘못된 부분이 있을 수도 있으니 혹시 이상한 부분이 있다면 댓글 남겨주세요

---

HTMLCollection VS NodeList

HTMLCollection	NodeList
DOM API가 여러 개의 결과 값을 반환하기 위한 DOM 컬렉션 객체 유사 배열 객체이며 이터러블이다 스프레드 문법을 사용하여 배열로 변환 가능
노드 객체의 상태 변화를 실시간으로 반영한다 살아 있는 객체(live) 실시간으로 객체의 상태를 변경하여 반영하여서 for 문 순회시 주의해야 한다 getElementsByTagName getElementsByClassName	실시간으로 노드 객체의 상태 변경을 반영하지 않는다 과거 정적 상태를 유지하는 객체(non-live) childNodes 프로퍼티가 변환하는 NodeList객체는 Live 객체로 동작하므로 주의해야한다 querySeletorAll

HTML 어트리뷰트 VS DOM 프로퍼티

HTML 어트리뷰트	DOM 프로퍼티
HTML 요소는 여러 개의 어트리뷰트를 가질 수 있다 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NameNodeMap개게에 담겨서 요소 노드의 attributes 프로퍼티에 저장된다 HTML 초기 상태를 지정한다 HTML 어트리뷰트 값은 HTML 초기 상태를 의미하며 변하지 않는다	HTML 어트리뷰트에 대응하는프로퍼티 HTML 어트리뷰트 값을 초기값으로 가진다 setter와 getter 모두 존재하는 접근자 프로퍼티로 참조와 변경이 가능하다 요소 노드의 최신 상태는 DOM 프로퍼티가 관리한다

getter 프로퍼티와 getter and setter 프로퍼티

getter	getter and setter
참조한 가능한 읽기 전용 접근자 프로퍼티 읽기 전용 접근자 프로퍼티에 값을 할당하면 아무런 에러 없이 무시된다	참조와 할당 모두 가능한 접근자 프로퍼티
노드를 탐색할 때 사용되는 모든 프로퍼티 attributes 프로퍼티	nodeValue 프로퍼티 textContent 프로퍼티 innerHTML 프로퍼티 DOM 프로퍼티 style 프로퍼티 className 프로퍼티