qwef

jay data-커스텀속성 이거 접근하려면, const name = $li.dataset.name; 태그.dataset.속성이름 이렇게 접근 가능

document.getElementById('location').innerHTML = `현재문서 URL : : ${location.href} 현재 문서 도메인명 : ${location.hostPathname} 현재 문서 경로명 : ${location.hostname} 현재 문서 프로토콜 : ${location.protocol} `; document.getElementById('naver-btn') .addEventListener('click', e=>{ location.assign('https://naver.com'); }); 현재문서 URL : : http://127.0.0.1:51331/ 현재 문서 도메인명 : undefined 현재 문서 경로명 : 127.0.0.1 현재 문서 프로토콜 : http:

const $orderForm = document.forms.order; const $userInfo = $orderForm.elements.userInfo; const $productInfo = $orderForm.elements.productInfo; console.log($orderForm); console.log($userInfo); console.log($productInfo); document.getElementById('btn1') .addEventListener('click', e=>{ const { name, tel } = $userInfo.elements; console.log($userInfo.elements); console.log(`${name.value}사용자 ${tel.valu..

function buildAlert(title, message){ const $alert = document.createElement('div'); const id = Math.ceil(Math.random() * 1000); console.log(id); $alert.className = 'alert'; const $span = document.createElement('span'); $span.classList.add('close'); $span.innerHTML = '×'; const $h3 = document.createElement('h3'); $h3.textContent = title; const $p = document.createElement('p'); $p.textContent = mes..

const li = e.target.closest('li'); 이벤트 일어났을 때 부모 찾아서 통째로 지우거나 할 때 편리할 듯. html 태그 객체를 통해 지우는 것도 쉬움. li.remove(); 걍 이렇게 하면 지워짐.

$preventSpan.addEventListener('contextmenu',(e)=>{ e.preventDefault(); }) 이러면 우클릭 시 콘텍스트메뉴 생성되는거 막아줌. $preventSpan.addEventListener('contextmenu',(e)=>{ console.log('prevent element click'); e.stopPropagation(); e.preventDefault(); }) 이렇게 e.stopPropagation(); 까지 추가하면 부모로 가는 이벤트 버블링도 막고, 'contextmenu'의 기본 이벤트도 막아줌. 이 외에도 뭐 a링크의 클릭하면 페이지 이동하는 것을 막는다던지 그런 거 할 수 있음.

$preventSpan.addEventListener('contextmenu',(e)=>{ console.log('prevent element click'); e.stopPropagation(); }) 이렇게 하면 버블링을 막아줌. 부모까지 이벤트 전파가 되지 않음.

버블링 캡처링 const element1 = document.querySelector('#element1'); const element2 = document.querySelector('#element2'); const element3 = document.querySelector('#element3'); const element4 = document.querySelector('#element4'); element1.addEventListener('click', e=>{console.log('element1 clicked')}); element2.addEventListener('click', e=>{console.log('element2 clicked')}); element3.addEventListener(..

우리가 굳이 setAttribute()나 이런 거 안해도. $tag.id나 이런 거 지원해 주는 게 몇몇 있음. $input.value나 꽤 있음

querySelectorAll() 해서 가져온 거 .item(인덱스) 하면 됨.