728x90 반응형 전체 글295 JavaScript] HTML attributes and DOM properties 출처 : https://javascript.info/dom-attributes-and-properties 브라우저가 page를 로딩할때, HTML을 읽고 DOM objects를 생성한다. 대부분의 표준 HTML attributes는 자동으로 DOM objects의 properties가 된다. 예를들어 태그가 일때, DOM object는 body.id="page"를 갖는다. 하지만, attribute-property가 1:1 매핑되는 것은 아니다. 둘이 언제 같고 다른지 살펴보자. DOM properties 이미 많은 내장 DOM properties를 살펴보았다. 하지만 기술적으로 그 수가 제한되지 않았으며, 임의로 추가가 가능하다. DOM nodes는 일반 JavaScript Objects이므로, 수정이.. 2022. 11. 8. JavaScript] DOM Node properties 출처 : https://javascript.info/basic-dom-node-properties DOM node classes 다른 DOM nodes는 다른 properties를 갖고 있다. 예를들어 tag에 해당하는 element node는 link와 연관된 properties를 갖는다. 하지만, 공통 properties와 함수도 있다. DOM nodes의 모든 class는 하나의 hierarchy에서 나왔기 때문이다. hierarchy의 근본은 EventTarget이며 Node에 의해 상속된다. EventTarget - root 'abstract' class, 근본 추상 클래스, 따라서 모든 DOM nodes는 'events'를 지원한다. Node - 또한 추상 클래스, core tree 기능(pa.. 2022. 11. 4. JavaScript] Searching: getElement*, querySelector* DOM navigation properties는 elements가 서로 가까이 있을때 유용하다. 하지만 페이지에서 임의의 element에 접근을 해야할때는 어떻게 할 수 있을까? 이런 경우를 위한, 추가 searching methods가 있다. document.getElementById 만약에 element가 id attribute를 갖고 있다면, 우리는 document.getElementById(id) 함수를 이용해서 원하는 element를 찾을 수 있다. id는 unique해야한다. getElementById함수는 document object에서만 호출할 수 있다. Element querySelectorAll 가장 다용도로 사용되는 함수는 elem.querySelectorAll(css)이다. elem.. 2022. 11. 4. JavaScript] DOM Navigation 출처 : https://javascript.info/dom-navigation 원하는 element를 수정하기 위해서는 해당하는 DOM object가 필요하다. DOM의 모든 동작은 document object와 시작한다. 이로부터 어떠한 node에도 접근할 수 있다. On top: documentElement and body 최상단 3개의 document properties가 있다. = document.documentElement = document.body Children: childNodes[nodenumber], firstChild, lastChild Child nodes (or children) - direct children인 elements. 예를들어 , 는 element의 children이.. 2022. 11. 3. JavaScript] DOM tree 출처 : https://javascript.info/dom-nodes HTML document의 뼈대는 tags이다. Document Object Model (DOM)에 따르면, 모든 HTML tag는 object이다. enclosing tag에 포함된 tags는 children이다. tag 내부의 text 또한 object이다. 이러한 모든 objects는 JavaScript를 통해서 접근이 가능하며, 이를 활용해 page를 수정할 수 있다. 예를들어 document.body는 tag를 나타내는 object이다. 아래 코드를 실행하면 3초간 red로 변경할 수 있다. document.body.style.background = 'red'; // make the background red setTimeou.. 2022. 11. 3. JavaScript] Browser environment, DOM, BOM 출처 : https://javascript.info/browser-environment Browser environment, specs JavaScript는 처음에 웹 브라우저를 위해 만들어졌다. 따라서 많은 활용과 플랫폼과 함께 발전하였다. browser, web-server, 또다른 host와 같은 platform이다. 각각은 특화된 platform 기능을 제공한다. 이것을 host environment라고 칭한다. host environment는 language core뿐만 아니라 자신의 objects, function을 제공한다. 아래는 web browser에서 JavaScript가 실행될때 갖는 것들의 조감도이다. window라 불리는 root object가 있다. 2가지 역할이 있다. Java.. 2022. 11. 3. 이전 1 ··· 21 22 23 24 25 26 27 ··· 50 다음 728x90 반응형
