좌충우돌 개발자의 길

window.location.href

1. 이벤트 전파 방식 : 이벤트 버블링 자식요소에서 발생한 이벤트 객체는 부모와 그 부모를 통해 전파 (하위요소에서 상위요소로 올라감) 2. 버블링할 수 있는 이벤트와 아닌 이벤트 3. event.stopPropagation() : 이벤트 버블링 막기 이벤트 버블링을 막아야하는 경우는 드물어서 이걸 사용하는 일도 드물다 4. 이벤트 위임 - 자신에게 발생하는 일을 다른 요소에서 처리하게 만들기 => 버블링을 이용하자! currentTarget : 항상 ul을 가리킴 => 핸들러가 등록된 요소 target : 클릭된 요소를 가리킴 => 이벤트를 발생시키는 요소 이벤트 이벤트 위임x : target === currentTarget function clickHandler(event) { let target ..

1. 이벤트 핸들러 종류 이벤트 : 마우스나 키보드를 누를때 일어나는 일들, input창에 포커스가 되거나, 문서에 로드가 완료되면 이벤트 발생 핸들러 : 이벤트를 특정한 함수로 실행할 수 있는데 이것을 핸들러라고 함 클릭 클릭2 클릭3 클릭4 2. 자주 쓰는 이벤트 /*더블 클릭시 이벤트 반응*/ el.addEventListener("dbClick", sayHello); /*키보드 누를 때 이벤트 발생*/ el.addEventListener("keyup", event => { console.log(event); /*event가 콘솔창에 뜨는데 이때, 어떤 키를 눌렀는지도 확인 가능함*/ }) /* focus : input창에 포커스가 될 때 발생*/ input.addEventListener("focus..

1. CSS style 2. class 제어 className 으로 제어하기 classList 로 제어하기 (여러개 class 넣을 수 있음) .classList.add : 클래스 추가 .classList.remove : 클래스 제거 .calssKist.replayce(a,b) : a를 b로 바꿈 .classList.toggle() : 클래스가 있으면 빼고 없으면 넣는 기능 출처 : 코딩앙마

1. 노드 수정 추가 - nodeValue를 이용해서 내용을 추가 수정할 수 있음 (text value만 사용 가능, 나머지는 null처리함) -> ex) blueTextNode.nodeValue = '파랑'; -> blue -> 파랑으로 바뀜 2. innerHTML 사용법) 마크업을 제대로 표현하고 싶을 때 사용 -> EX) ul.innerHTML = 'RED; 단점) 요소를 추가,제거 수정할때마다 다시 모든 html을 string으로 추가해야함 -> EX) ul.innerHTML = 'REDBLUE; 3. 노드 생성 1) appendChild() 방법1) innerHTML 새로운 li 를 만듦 : const newLi = document.createElement('li'); 자식 텍스트 노드 붙이기 ..

1. queryselectorAll과 getElementsByTagName의 차이점 1) 반환값이 다르다 2) 업데이트된 내용 - p태그를 하나 더 추가하고 위의 코드 다시 돌려보면 getElement..는 업데이트하고 querySelectorAll은 반영 x 2. 부모노드 접근 - red.parentNode : red라는 id를 가진 태그의 부모노드를 출력 - red.parentElement : red라는 id를 가진 태그의 부모노드를 출력 3. parentNode와 parentElement의 차이점 - parentNode : 부모노드를 반환하는데 html의부모노드는 document가 되는 거임, 부모인 노드 중 모든 노드를 반환 - parentElement : 부모노드 중 요소노드만 반환함 (요소노드..

1. DOM (Document Object Model) DOM은 html의 각 요소들을 트리 형식으로 표현해주는 자료구조이며 개발자는 JS로 이것들을 수정하거나 삭제하거나 생성 가능 - 하나의 객체를 노드라고 함 - 부모 노드와 자식 노드로 구분 2. 모든 html 태그는 객체로 구성 - 콘솔창에 : document.documentElement 하면 html 태그 안의 코드가 출력 document.body; 하면 body 태그 안의 있는 코드가 출력 태그명으로 접근 : document.getElementsByTagName('p')' -> p태그로 접근 - className로 접근하기 className으로 접근 : 1) document.getElementsByClassName('link') -> class..

드림코딩의 JS 강의를 듣고 노션에 정리했다! https://blossom-river-c97.notion.site/JS-1ba1de37b1f544c48c977b3872226610 JS A new tool for teams & individuals that blends everyday work apps into one. blossom-river-c97.notion.site