쑥쑥자라기🌱

이벤트가 어떻게 전파되는지 알아보겠습니다. Red const box = document.getElementById("box"); const list = document.getElementById("list"); const color = document.getElementById("color"); document.body.addEventListener("click",()=>{ condole.log("1, body"); }) box.body.addEventListener("click",()=>{ condole.log("2, div"); }) list.body.addEventListener("click",()=>{ condole.log("3, ul"); }) color.body.addEventListener(..

마우스를 클릭하거나 키보드를 누르거나 하는 행동들을 이벤트라고 하는데요. 이외에도 인풋 창에 포커스가 되거나 문서에 로드가 완료되면 이벤트가 발생합니다. 이때 특정 함수를 할당해서 실행해 줄 수 있는데 이것을 핸들러라고 합니다. 클릭1 클릭2 클릭3 on 다음에 이벤트 타입을 적어줍니다. onclick 내부에 함수 명을 적어줍니다. function sayHello(){ alert("Hello") } const el = document.getElementById('btn'); el.onclick = sayHello; // 이때 괄호는 없어야 함. // 괄호가 있으면 함수의 반환값이 할당됨. 지금은 undefined const el2 = document.getElementById('btn2'); el2.ad..

html 요소에 style과 class를 제어해 보겠습니다. const box = document.getElementById("box"); box.style.backgroundColor = 'red'; box.style.color = '#fff'; box.style.width = '100px'; box.style.height = '100px'; 주의할 점은 일반적으로 css를 작성할 때 background-color 이런식으로 작성을 하는데 여기서는 backgroundColor 이런식으로 카멜케이스로 작성하면 됩니다. box.style['margin-left'] = '30px'; 익숙한 방법으로 작성을 하려면 이런식으로 작성하면 됩니다. box.style; CSSStyleDeclaration {...} ..

Welcome World Red Blue Green A const blue = document.getElementById('blue'); blue.firstChild; text ('Blue') blue.firstElementChild; null firstChild는 자식 노드로 text가 나오고 firstElementChild는 자식 요소 노드는 없기 때문에 null이 나옵니다. const blueTextNode = blue.firstChild; blue라는 text 노드의 정보들을 보겠습니다. blueTextNode.nodeName; '#text' blueTextNode.nodeType; 3 buleTextNode.nodeValue; 'Blue' nodeName은 #text, nodeTye은 3(문서 ..

getElement와 getquerySelector 두 메서드는 반환 값이 조금 다릅니다. 'document.querySelectorAll('p'); NodeList(4) [p#first, p#second, p, p] document.getElementByTagName('p'); HTMLCollection(4) [p#first, p#second, p, p, first: p#first, second: p#second] querySelectorAll과 getElementByTagName은 동일한 동작을 하는 것처럼 보이지만 반환값은 NodeList와 HTMLCollection으로 다릅니다. 둘 다 유사 배열 객체면서 iterable(반복가능한)인데요. 그래서 for of로 순회했었습니다. const pLis..

DOM은 Document Object Model의 약자. 문서 객체 모델입니다. DOM은 HTML 문서의 각 요소들을 트리 형식으로 표현해줍니다. 개발자는 자바스크립트를 이용해서 이를 생성하거나 수정하거나 삭제할 수 있습니다. 돔을 그림으로 표현하면 이렇게 트리 형식의 자료 구조가 됩니다. 이 하나의 객체를 노드라고 부릅니다. 트리에서 위쪽은 부모 노드 아래쪽을 자식 노드라고 합니다. 도큐먼트를 제외하고 최상단에 있는 html은 루트 노드가 됩니다. 크롬에서 개발자 도구를 열었을 때 보이는 부분이 바로 돔입니다. 콘솔 창을 열고 하나씩 접근해 보겠습니다. document.documentElement document.documentElement 하면 html에 접근할 수 있습니다. document.body..