📚 DOM(Document Object Model) : 웹페이지에 대한 인터페이스
- 브라우저 환경에서 자바스크립트를 이용해 HTML조작 가능
- DOM을 통해 웹페이지의 컨텐츠, 구조, 스타일을 읽고 조작 가능
console.dir은 DOM을 객체의 모습으로 출력한다.
✅ element 와 node의 차이
- element는 HTML에서 태그로 적은 노드들을 칭한다. ex)
<html>,<div>,<title> - 다음 Node의 속성은 node or NodeList 라고한다.
node.parent; // Node or null
node.firstChild;
node.lastChild;
node.childNodes;- 다음 Node의 속성은 element나 element의 집합이다.
node.parentElement;
node.children;📚 createDocumentFragment()
- 다른 노드를 담는 임시 컨테이너 역활을 하는 특수 목적의 노드이다.
- 가상의 노드 객체로서, 메모리상에서만 존재
- parentNode 객체는 항상 null 하지만 Element처럼, appendChild() 와 insertBefore() 등으로 조작할 수 있는 자손 객체를 가질 수 있다.
📚 display: none <-> visibility: hidden 차이점
-
none : 화면상에서 표시되지 않게 만드는 속성으로, 실제로는 DOM상에 엘리먼트가 존재하나, 브라우저에서 표시할때는, 마치 해당 엘리먼트가 레이아웃 상에서 없는것 처럼 취급합니다.
-
hidden : 엘리먼트가 차지하는 영역을 그대로 남겨놓는다.
Hi