어쩐지 이해가 어렵더라니
역할
html 을 웹앱으로 업그레이드 한다
새로운 엘리먼트들을 추가, 삭제 ,조작 가능하다.
dom 발생 계기
js 자체에는 기능 제한이 있다.
, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, SVG documents, and their component parts.
결국 세부 요소에 어덯게 접근 할 것이며,
어떻게 홈페이지를 동적으로 구현할수있을지에 대한 방법.
nodejs와 js, dom 의 관계
자바스크립트는 웹페이지를 제어하기 위한 목적으로 오래 상용됌
nodejs가 js 프로그래밍을 작동시키지만, 다른 set의 API들을 제공한다고 함.
DOM API은 node.js runtime에서 주요 요소가 아니라고 함. (포함되는건지 아직 파악중)
또다시 dom
dom은 결국 어떠한 특정언어와도 독립적으로 고안된것임. 싱글 페이지에 문서의 구조적인 표시를 하기 위해 고안되었고, 일관된 API이다.
만약 개발자가 dom만 자바스크립트를 통해 사용한다면, dom 실행및 구축은 어떠한 언어와도 가능함.
1 자바스크립트내 Api를 직접 사용하기 (script라고 불리는곳, 브라우저를 실행시키는 프로그램)
2 you can immediately begin using the API for the document or window objects to manipulate the document itself, or any of the various elements in the web page
3 console log로 정상 구동되는지 확인해볼 것.
<body onload="console.log('Welcome to my home page!');">
script
-Virtual Dom
정의
데이터의 가장 작은 단위(더이상 쪼갤수없는 )어트리뷰트,이벤트처리, 수동 dom 업데이트를 추상화 한다
리엑트 의 선언적 api
var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...]
var els = document.body.children; // HTMLCollection [noscript, link, div, script, ...]
var yoosa = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
유사배열 구분법 및 활용
1 array instanceof Array, Array.isArray 로 확인할 수 있음.
2 직접 배열 리터럴로 선언한 arr 인경우만 array 인것임
3 배열도 객체라는 성질을 이용할 수 있음 .
4 forEach 는 사용가능, reducer, map, filter는 사용하기 힘들다. (배열 메소드는 에러가 난다 주의 )
5 obj[0] 이렇게도 활용가능.
- document.body
- console.log(document.body)
- console.dir (document.body)
- 속성과 속성내용, tag에 무엇이 들어갔는지 파악할 수있다. 트리구조.
- 엘리먼트에 담긴내용도 확인할 수 있다. innerHTML, textContent, innerText
- 공백도 다 포함해서 string 처리하는가, tag 내용까지 string 처리하는가
관심사 분리
aspect/subject -oreinted -programming
reference
Node = Parenet Node는 document만 될까
페어의 virtualdom
nodetype
유효성 검사- react.ver
react-hook/ reactmemo
mdn- virtual -dom
함수 call,apply,bind
react elements?
div 엘리먼트에 class 를 추가해야 css 스타일링이 되는 이유.
contaienr 자식 요소 추가 하는 이유- 브라우저에 보이기 위해.
-class와 id 말고는 다른 attribute를 추가할 수는 없나? (setAttribute)
개념
시간복잡도와의 관계