< Code diaries />

이벤트란?웹사이트 이용시 사용자가 조작하는 어떤 동작이나, 브라우저 자체에서 상태를 캐치하여 일어날 수 있는 동작들을 말한다.예를 들면 문서를 불러들이는 순간(온로딩), 마우스를 요소에 올리는 동작, 클릭하는 동작, 스크롤링 등이 대표적인 이벤트 이다. 웹브라우저에서 일어날 수 있는 이벤트를 3가지로 나누어 정리 해보자. 1. 문서로딩 이벤트Event이벤트가 발생하는 순간DOMContentLoaded웹브라우저가 HTML을 리딩하여 DOM 트리구조를 만든 직후에 발생하며,CSS 및 Image, Video, Audio등의 자원이 로딩될때까지 기다리지는 않는다.Document객체에서 발생한다. 그래서 on 이벤트는 적용되지 않고, addEventListener를 사용해야 한다.document.addEventL..

Node의 유형을 지정하는 정수타입의 값이다.nodeType(Value)definiationincludes..1Node.ELEMENT_NODE, ...2Node.ATTRIBUTE_NODE요소의 속성3Node.TEXT_NODE요소 또는 속성의 실제 텍스트4Node.CDATA_SECTION_NODECDATASection, 5Node.ENTITY_REFERENCE_NODE더이상 사용하지 않음6Node.ENTITY_NODE더이상 사용하지 않음7Node.PROCESSING_INSTRUCTION_NODE와 같은 XML 문서의 처리 지침8Node.COMMENT_NODE 주석문 노드9Node.DOCUMENT_NODEDocument node10Node.DOCUMENT_TYPE_NODE11Node.DOCUMENT_FRA..

DOM(Document Object Model)  HTML을 코딩하는 것을 마크업 한다고합니다. 모든 태그는 컨텐츠 요소로 다른 태그를 포함할 수 있는 중첩구조를 가지게 됩니다.그러다보면 처음에 열린 태그, 두번째 열린태그 등.. 계층구조를 가지며 DOM 트리구조를 형성하게 됩니다.DOM 트리구조를 이해해야 CSS에서 HTML을 선택할 때에도 잘 이해할 수 있게 됩니다.단, 빈요소(Empty Element) 태그는 다른 태그를 컨텐츠요소로 포함 할 수 없습니다.  중첩코딩  Hello, HTML Menu 1 Menu 2 Menu 3 Let's coding. Important content             ..

오늘은 javascript에서 어떻게 HTML 요소의 값을 다루는지 살펴보아요~렛츠가.. 기릿입니다... (흐흐흐 아시는분은 다 아시는 구호죠? 돌비채널 팬이라.. )아래의 간단한 HTML 마크업으로 한번 해 봅시다~See My fruite 토마토 INIT - 먼저 html 요소를 변수에 담아옵니다.const title = document.querySelector('.title');const img = document.querySelector('.thumb img');const caption = document.querySelector('.thumb figcaption');  Property ListPropertytypedescriptiontextContentNodescript, style 적..

따라란~~오늘부터는 Javascript에서 Dom을 다루는 다양한 방법들을 정리해 보려고 합니다. Javascript 에서 HTML 요소를 조작하기 위하여는 일단 접근을 해야합니다.자주사용하는 방법을 공부해 봅시다~! ^^모든 접근하는 명령어는 문서 하단의 MDN 사이트에서 참조하시면 됩니다. Hello DOMNice to meet you~Hello JavaScriptGood morning Everyone   1. ID 명으로 접근하기const h1 = document.getElementById('h1');  2. querySelector 로 접근하기const title = document.querySelector('.title'); 이경우 예제에서 클래스 'title'은 2개 이지만, 첫번째로 찾은 태..