Dom
- 언어 정의
html 을 바라보는 다른관점.
Document Object Model .
참고로 dom은 프로그래밍 언어가 아니라 WEB API!
어쩐지 이해가 어렵더라니
-
역할
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!');">
-
- ADD :
script- 스크립트를 만들때, 웹 페이지를 포함하는 인라인 요소,
- 등장과 함께 실행된다
- 웹브라우저는 script 요소 만나면 html 해석 일시정지
- ADD : HTML
- html 은 프로그래밍을 위한 언어가 아님
- 자식 엘리먼트 갯수,부모엘리먼트 갯수, console.log로 모든 자식 엘리먼트 class를 확인할 방법은..?
- hmtl 내에서 컴퓨터가 답을 찾게 만드는것 은 어려울 것.
-Virtual Dom
정의
데이터의 가장 작은 단위(더이상 쪼갤수없는 )어트리뷰트,이벤트처리, 수동 dom 업데이트를 추상화 한다
리엑트 의 선언적 api
- 원리 : react -> 원하는 ui 상태 -> dom 과 일치
- 유사 배열 :
예시 : 노드 리스트,
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- CSS display 속성을 자바스크립트로 조작하는 방법 display:none 은 default 값.
- (관심사 분리가 적용된) 인터랙션 설계 (css, html ,js가 따로따로 선언된다)
- CSS 클래스를 이용한 인터랙션 설계
- 자바스크립트를 이용한 CSS 클래스 추가/삭제하기
- query SElector
ex : 유효성 검사
추가 공부 필요
-
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)
개념
시간복잡도와의 관계
