[JS] Dom& Eventhandlers
Dom (Document Object Model)
DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다.
JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있습니다.
왜 HTML을 접근해야 할까?
document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있습니다. 그렇게 class, id도 추가하고 style도 수정할 수 있습니다.
특정 element를 접근 or 생성
tag, class, id와 같은 css selector로 접근 가능합니다.
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';
.createElement(tagName) 함수를 사용하면 요소(element)를 만들 수 있습니다.
Event 란?
요즘에는 화려하고 다양한 기능이 들어가는 웹 사이트가 늘어나면서 프론트앤드 개발자가 처리해야할 interaction이 더 많아졌습니다.
특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 합니다.
클릭 이벤트
마우스 이벤트
스크롤 이벤트
터치 이벤트
resize(화면 크기 변화) 이벤트
등등 다양합니다.
이벤트를 달 때 사용하는 함수 이름은 addEventListener
입니다.
종류 참고
:https://www.w3schools.com/js/js_htmldom_eventlistener.asp
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Author And Source
이 문제에 관하여([JS] Dom& Eventhandlers), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leejyart/JS-Dom-Eventhandlers저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)