![bg right](https://images.unsplash.com/photo-1547394765-185e1e68f34e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w1NTU5NjN8MHwxfHNlYXJjaHwxMnx8Y29tcHV0ZXJ8ZW58MHx8fHwxNzE1MzEzNjA0fDA&ixlib=rb-4.0.3&q=85) # DOM ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [DOM이란?](#dom이란) - [Selecting DOM elements](#selecting-dom-elements) - [Modifying DOM elements](#modifying-dom-elements) - [Event handling](#event-handling) --- ![width:480px height:480px bg right](https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/DOM-model.svg/640px-DOM-model.svg.png) # DOM이란? --- # DOM이란? - **D**ocument **O**bject **M**odel (DOM)의 약자 - 웹페이지를 나타내는 구조화 된 JavaScript 객체 - JavaScript를 통해 HTML elements와 상호작용 할 수 있게 해줌 --- ![](https://cdn.markslides.ai/users/1/images/-TFphGTt952-5XKkTt1F9) --- # DOM tree 예시 ```mermaid graph TB A[HTML] B[head] C[title] D[body] E[h1] F[p] G[img] H[a] I[ul] J[li] K[li] L[li] M[footer] A --> B B --> C A --> D D --> E D --> F D --> G D --> H D --> I I --> J I --> K I --> L D --> M ``` --- # DOM manipulation - JavaScript를 통해 DOM을 조작하는 것 - element를 선택(Selecting)하는 과정과 조작(Modifying)하는 과정으로 나눠짐 - 사용자와의 상호작용 또는 이벤트에 의해 동적으로 웹페이지를 업데이트 할 수 있음 --- ![width:480px height:358px bg right](https://media3.giphy.com/media/ZDTbix65Me1YDNLDF3/giphy.webp?cid=d8f9e3b8kxeoml1ajup6bw57ibsftm0qqo9vopk6mxv32tyr&ep=v1_stickers_search&rid=giphy.webp&ct=ts) # Selecting DOM elements --- # DOM element 선택을 위한 함수들 - `getElementById()` - `getElementsByClassName()` - `getElementsByTagName()` - `querySelector()` - `querySelectorAll()` --- # `getElementById()` `id` 값으로 단일 element를 선택하기 위한 함수 ```js const element = document.getElementById('elementId'); ``` --- # `getElementsByClassName()` `class` 값으로 여러 개의 element들을 선택하기 위한 함수 ```js // Get all elements that have 'class1' const element = document.getElementsByClassName('class1'); // Get all elements that have both the 'class1' and 'class2' classes const element = document.getElementsByClassName('class1 class2'); ``` --- # `getElementsByTagName()` HTML tag 이름으로 여러 개의 element들을 선택하기 위한 함수 ```js const element1 = document.getElementsByTagName('h1'); const element2 = element1.getElementsByTagName('div'); const element3 = element2.getElementsByTagName('span'); ``` --- # `querySelector()` [selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)를 사용하여 단일 element를 선택하기 위한 함수 ```js const element1 = document.querySelector('h1'); // 'id' 앞에는 '#'을 붙임 const element2 = document.querySelector('div#elementId'); // 'class' 앞에는 '.'을 붙임 const element3 = document.querySelector('span.elementClass'); ``` --- # `querySelectorAll()` [selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)를 사용하여 여러 개의 element들을 선택하기 위한 함수 ```js const elements1 = document.querySelectorAll('h1'); // 'id' 앞에는 '#'을 붙임 const elements2 = document.querySelectorAll('div#elementId'); // 'class' 앞에는 '.'을 붙임 const elements2 = document.querySelectorAll('span.elementClass'); ``` --- ![width:480px height:358px bg right](https://media3.giphy.com/media/ZDTbix65Me1YDNLDF3/giphy.webp?cid=d8f9e3b8kxeoml1ajup6bw57ibsftm0qqo9vopk6mxv32tyr&ep=v1_stickers_search&rid=giphy.webp&ct=ts) # Modifying DOM elements --- # Changing element content ```js // Get element by ID const element = document.getElementById('elementId'); // Change content of the element element.innerHTML = 'New content'; ``` --- # Modifying element attributes ```js // Get element by ID const element = document.getElementById('elementId'); // Modify the attribute value element.setAttribute('class', 'newClass'); // Get the attribute value const attributeValue = element.getAttribute('class'); // Remove the attribute element.removeAttribute('class'); ``` --- # Adding or removing classes ```javascript // Select the element const element = document.getElementById('elementId'); // Add a class element.classList.add('new-class'); // Remove a class element.classList.remove('old-class'); ``` --- # Creating new elements ```javascript // Creating a new element const newElement = document.createElement('div'); // Adding content to the new element newElement.textContent = 'This is a new element'; // Appending the new element to an existing element const parentElement = document.getElementById('parent'); parentElement.appendChild(newElement); ``` --- ![width:480px height:358px bg right](https://media3.giphy.com/media/ZDTbix65Me1YDNLDF3/giphy.webp?cid=d8f9e3b8kxeoml1ajup6bw57ibsftm0qqo9vopk6mxv32tyr&ep=v1_stickers_search&rid=giphy.webp&ct=ts) # Event handling --- # Add/Remove event listener ```javascript const button = document.getElementById('myButton'); function handleClick() { // Do something when the button is clicked }; // Add event listner button.addEventListener('click', handleClick); // Remove event listener button.removeEventListener('click', handleClick); ``` --- # Add multiple event listeners ```js const button = document.getElementById('myButton'); function firstHandler() { // Do something when the button is clicked } function secondHandler() { // Do something when the button is clicked } // Add multiple event listeners button.addEventListener("click", firstHandler); button.addEventListener("click", secondHandler); ``` --- # Add event listener to `window` object ```javascript // Define the event handler function function handleWindowResize(event) { console.log("Window resized!"); } // Add the event listener to the window object window.addEventListener("resize", handleWindowResize); ``` --- # References - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents - https://www.w3schools.com/js/js_htmldom.asp --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)