Local Storage key value pair 이며 String으로만 저장 가능하다. 따라서 배열이나 객체 등은 JSON.stringify 메서드를 이용해 문자열로 변경후 저장한다. 데이터를 삭제하려면 수동으로 지워야 한다. (세션이 종료되어도 데이터가 남아있음) Session Storage Local Storage와 비슷하나 다른점은 세션이 종료될 때 데이터가 없어진다는 점이다. // set local storage item // localStorage.setItem("name", "John"); // localStorage.setItem("age", "30"); // set session storage item // sessionStorage.setItem("name", "Beth"); // r..

Event Bubbling 어떤 요소의 이벤트 핸들러가 동작할 때 그 요소의 상위, 더 나아가 최상단 요소의 핸들러까지 동작해버리는 현상을 이야기 한다. // Event Bubbling card-title을 클릭했지만 아래 모든 핸들러가 전부 동작해버림 document.querySelector(".card-title").addEventListener("click", function(e) { console.log("card title"); }); document.querySelector(".card-content").addEventListener("click", function(e) { console.log("card content"); }); document.querySelector(".card").ad..

const form = document.querySelector("form"); const taskInput = document.getElementById("task"); const heading = document.querySelector("h5"); const select = document.querySelector("select"); // Clear input taskInput.value = ""; // form.addEventListener("submit", runEvent); // Keydown // taskInput.addEventListener("keydown", runEvent); // Keyup // taskInput.addEventListener("keyup", runEvent); //..

mouseover, mouseout과 mouseenter,mouseleave의 차이를 확실히 알자 const clearBtn = document.querySelector(".clear-tasks"); const card = document.querySelector(".card"); const heading = document.querySelector("h5"); // Click // clearBtn.addEventListener("click", runEvent); // Double Click // clearBtn.addEventListener("dblclick", runEvent); // Mousedown => 마우스를 누른 순간(떼는 동작은 따로 있음) // clearBtn.addEventListene..

Replace // Create Element const newHeading = document.createElement("h2"); // Add an id newHeading.id = "task-title"; // New text node newHeading.appendChild(document.createTextNode("Task List")); // Get the old Heading const oldHeading = document.querySelector("#task-title"); // Parent const cardAction = document.querySelector(".card-action"); // Replace cardAction.replaceChild(newHeading, oldH..

// Create element const li = document.createElement("li"); // Add class li.className = "collection-item"; // Add id li.id = "new-item"; // Add attribute li.setAttribute("title", "New Item"); // Create text node and append li.appendChild(document.createTextNode("Hello World")); // Create new link element const link = document.createElement("a"); // Add classes link.className = "delete-item second..

let val; const list = document.querySelector("ul.collection"); const listItem = document.querySelector("li.collection-item:first-child"); val = listItem; val = list; // Get child nodes val = list.childNodes; // count line breaker as a text node. val = list.childNodes[0]; val = list.childNodes[0].nodeName; val = list.childNodes[1].nodeType; // nodetypes // 1 - Element // 2 - Attribute // 3 - Text..

선택자에 따라 HTMLCollection과 NodeList 두 가지 리턴형식이 존재 // document.getElementsByClassName // const items = document.getElementsByClassName("collection-item"); // console.log(items); // console.log(items[0]); // items[0].style.color = "red"; // items[3].textContent = "Hello"; // const listItems = document.querySelector("ul").getElementsByClassName("collection-item"); // console.log(listItems); // documen..

// // document.getElementById() // console.log(document.getElementById("task-title")); // // Get things from the element // console.log(document.getElementById("task-title").id); // console.log(document.getElementById("task-title").className); // const taskTitle = document.getElementById("task-title"); // // Change styling // taskTitle.style.background = "#333"; // taskTitle.style.color = "#fff"..

HtmlCollection이 Array가 아님에 주의 let val; val = document; val = document.all; // htmlcollection val = document.all[1]; // can access by indexes val = document.all.length; val = document.head; val = document.body; val = document.doctype; val = document.domain; val = document.URL; val = document.characterSet; val = document.contentType; val = document.forms; val = document.forms[0]; val = document.fo..