종우의 컴퓨터 공간

set storage item - localStorage.setItem('', ''); - sessionStorage.setItem('', ''); get from storage - const itemName = localStorage.getItem(''); - const itemName = sessionStorage.getItem(''); remove from storage - localStorage.removeItem(''); - sessionStorage.removeItem(''); clear storage - localStorage.clear(); - sessionStorage.clear(); ★예제 document.querySelector('form').addEventListener('submi..

Event Bubbling - 하위에서 상위 요소로의 이벤트 전파 방식이다. - 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 말한다. - 이벤트 버블링이 일어나는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. - 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파한다. - 주의해야 할 점은 각 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달되는 것을 확인할 수 있다. 만약 이벤트가 특정 태그에만 달려있다면 이벤트 버블링이 되지 않을 것이다. var divs = document.querySelectorAll('div'); divs.forEach(functi..

keydown - .addEventListener('keydown', ); keyup - .addEventListener('keyup', ); keypress - .addEventListener('keypress', ); focus - .addEventListener('focus', ); - fires off when the input field is clicked blur - .addEventListener('blur', ); - fires off when we click out of input field cut - .addEventListener('cut', ); - fires off when we cut the text from input field - ctrl + x paste - .addEven..

click - .addEventListener('click', ); double click - .addEventListener('dblclick', ); mousedown - .addEventListener('mousedown', ); - 왼쪽 마우스 누르고 있는 상태 유지할 때 mouseup - .addEventListener('mouseup', ); - 왼쪽 마우스 누르고 있다가 땔 때 mouseenter - .addEventListener('mouseenter', ); mouseleave - .addEventListener('mouseleave', ); mouseover - .addEventListener('mouseover', ); - even triggers when moving into oth..

Event listener with anonymous function document.querySelector('.clear-tasks').addEventListener('click', function(e) { console.log('Hello World'); //e.preventDefault(); }); - it is the event from the button - 'e' is the event object - 'e.preventDefault()' let the default behavior written in HTML does not make an effect Event listener with named function document.querySelector('.clear-tasks').addE..

Replace element - .replaceChild(, ); // create new heading element const newHeading = document.createElement('h2'); // add id newHeading.id = 'task-title'; // add text node newHeading.appendChild(document.createTextNode('Task List')); // get the old heading const oldHeading = document.getElementById('task-title'); // get the parent of old heading const cardAction = document.querySelector('.card-..

Creating elements - = document.createElement(''); Adding class, or id - .className = ''; - .id = ''; Adding attributes - .setAttribute(', ''); Creating text node - = document.createTextNode(''); Appending node - .appendChild(); 예제 // Create element const li = document.createElement('li'); // Add class li.className = 'collection-item'; // Add id li.id = 'new-item'; // Add attribute li.setAttribut..

let val; const list = document.querySelector('ul.collection'); const listItem = document.querySelector('li.collection-item:first-child'); get child nodes val = list.childNodes; val = list.childNodes[0].nodeName; val = list.childNodes[0].nodeType; val = list.childNodes[1].nodeType; val = list.firstChild // first child val = list.lastChild // last child val = listItem.parentNode; // get parent nod..