DOM4 [JavaScript] 자바스크립트 문서 객체 모델(DOM) - DOM Tree, DOM API, DOM 노드 접근, DOM 노드 탐색, DOM 노드 조작, DOM 이벤트 처리 문서 객체 모델 DOM (Document Object Model)DOM 이란 Document Object Model의 약자입니다. 번역하자면 문서 객체 모델인데요.여기서의 문서는 HTML 문서를 말한다. 브라우저는 웹 문서를 로드한 후, 파싱하여 DOM을 생성한다. DOM은 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것을 의미한다. 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며, 이 때 필요한 것이 DOM API이다.DOM Tree 구성요소문서 노드(Document Node) ➡️ 최상위 트리이자 접근의 시작점이다.요소 노드(Element Node) ➡️ HTML 요소를 표현한다.속성 노드(Attribute Node) ➡️ .. 2024. 6. 16. [JavaScript] 자바스크립트 요소 추가하기 - .createElement(), .createTextNode(), .appendChild() JavaScript 요소 추가자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. .createElement().createTextNode().appendChild()노드 객체 생성하는 주요 메서드메서드생성하는 노드 객체document.createElement(요소 이름) 요소 노드 객체document.createAttribute(속성 이름) 속성 노드 객체document.createTextNode(텍스트)텍스트 노드 객체document.createComment(텍스트) 주석 노드 객체document.createDocumentFragment()도큐먼트 프래그먼트document.importNode(다른 문서의 노드, deep)다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면.. 2024. 6. 13. [JavaScript] DOM 객체와 이벤트 처리 예제를 통해 DOM event 시스템 알아보기 Explore DOM EventsA visualizer to help you learn how the DOM Event system works through explorationdomevents.dev 이벤트 전달과 DOM 이벤트 처리정의특정 DOM 에서 이벤트가 발생하면 해당 DOM의 dispatchEvent() 라는 함수를 통해서 이벤트를 전달한다.이벤트 전달은 propagation path라는 전파 경로에 따라서 수행된다.이벤트 전달에 관한 이미지이벤트 전달 순서1) 이벤트 캡처단계이벤트 객체가 window 객체로부터 대상의 부모까지 순서대로 전달되는 단계2) 이벤트 대상단계이벤트 객체가 이벤트 대상에 도달하는 단계3) 이벤트 버블단계이벤트 객체가 대상.. 2023. 3. 10. [JavaScript] 브라우저 이벤트, 이벤트 프로퍼티, 이벤트 핸들링 참고자료 : https://ko.javascript.info/events 이벤트 기초 ko.javascript.info 2023. 3. 10. 이전 1 다음 728x90 반응형
