DOM27

• 

  [JavaScript]querySelectorAll 반복문 사용 방법 querySelectorAll 반복문 사용 방법 이번 포스팅은 JavaScript에서 HTML 요소를 가져오는 querySelectorAll() 메서드의 반환 결과에 반복문을 사용하는 방법을 소개합니다. 아래는 네 개의 div 태그를 가지는 HTML 마크업입니다. content1 content2 content3 content4 아래는 querySelector() 메서드로 div 태그를 가져오는 JavaScript 코드입니다. const content = document.querySelectorAll("div"); querySelectorAll() 메서드는 NodeList 객체를 반환하며, NodeList 객체에 반복문을 사용할 수 있는 방법을 알아봅시다. 방법 1. for 문 가장 기본적인 방법인 for.. JavaScript/DOM 2022. 11. 15.

• 

  [JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법 OnClick 이벤트에서 DOM 요소 제거하는 방법 DOM 요소를 클릭했을 때, 해당 요소를 제거하려면 다음 순서대로 코드를 작성합니다. 1. DOM 요소를 가져옵니다. 2. click 이벤트 리스너를 추가합니다. 3. 이벤트 핸들러에서 가져온 요소에 대한 remove() 메서드를 호출합니다. 예를 들어, id 속성이 parent인 요소를 클릭했을 때, 요소를 제거하는 코드는 다음과 같습니다. const parentDiv = document.getElementById('parent'); parentDiv.addEventListener('click', () => { parentDiv.remove(); }); getElementById() 메서드를 사용하여 id 속성이 parent인 요소를 가져온 다음 cl.. JavaScript/DOM 2022. 11. 11.

• 

  [Svelte]DOM 적용 후 실행되는 tick 함수 tick 함수 svelte에서 제공하는 tick() 함수는 props 또는 state가 DOM에 적용되자마자 Promise 객체를 반환합니다. 쉽게 설명하자면, script 영역에 선언된 변수의 값이 변경된 후 컴포넌트 또는 DOM 요소가 DOM에 바로 적용되지 않습니다. 추가적으로 처리해야 하는 작업이 필요한지 체크 및 적용 후 DOM에 적용합니다. 따라서, 추가적으로 처리해야 하는 작업이 필요한지 체크하는 과정에서 DOM 요소를 접근하는 경우 여러 문제가 발생합니다. 예를 들어, 다음과 같이 "input 태그 활성화" 버튼을 클릭하면 조건문에 의해 input 태그가 활성화됩니다. input 태그 활성화됨과 동시에 input 태그와 바인딩된 변수를 사용하여 포커싱 처리하려고 했으나 TypeError가 .. Svelte 2022. 8. 8.