728x90 300x250 SMALL jQuery12 Vanilla JS 동적 요소 추가/삭제 jQuery추가 Vanilla JS추가 const li = document.createElement("li"); //새 li요소를 생성li.textContent = "새 항목"; //텍스트 내용을 설정list.appendChild(li); //ul 또는 ol에 추가 2025. 4. 21. Vanilla JS 반복문, 동적 요소 제어 리스트 항목 클릭 시 해당 항목 강조 하기 jQuery 항목1 항목2 항목3 Vanilla JS 항목1 항목2 항목3 1. document.querySeletorAll("#list li")#list안에 있는 모든 li 태그를 선택해서 NodeList로 반환 2. forEach(functio(item){...})모든 li요소마다 반복하면서 이벤트를 붙임 3. item.addEventListener("click", function(){...})각 아이템을 클릭할 때마다 실행되는 클릭 이벤트 핸들러 4. items.forEach(el => el.classList.remove("selected"))리스트 전체에서 selected클래스를 전부 제거(선택 해제).el은 각각의 를 의미items.forE.. 2025. 4. 20. Vanilla JS 입력창에 입력한 값 가져오기 다음의 jQuery를 Vanilla JS로 변경해 보자 jQuery 값 확인 값 확인 "> 값 확인 Vanilla JS - 입력창에 입력한 값 가져오기값 확인 - value : 값을 가져오거나 설정할 때 사용document.getElementById("nameInput").value = "미리 채워진 값";이런식으로 변경도 가능 2025. 4. 19. Vanilla JS 기초 연습 - 버튼 클릭하면 alert 띄우기 다음의 jQuery 예시를 Vanilla JS로 변경해 보자클릭하세요! 클릭하세요!">클릭하세요! Vanilla JS - 버튼 클릭하면 alert 띄우기클릭하세요! 클릭하세요!">클릭하세요! - Document.querySeector() - 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환, 일치하는 요소가 없으면 null을 반환document.querySelector(selectors); ※선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용한다. - EventTarget,addEventListener() - 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.addEventListener(type, li.. 2025. 4. 17. 이전 1 2 3 다음 728x90 반응형 LIST