안녕하세요

264. 이벤트 버블링 : 공기방울이 바닥에서 올라가듯이 자식태그 > 부모태그로 이벤트가 연달아 발생합니다. button 이벤트동작 > p 이벤트동작 > .container 이벤트동작 > section 이벤트동작 자식을 클릭하면 자식이벤트 이후 부모의 이벤트가 순서대로 실행되어버립니다. 버블링을 막으려면(button을 클릭할 때 button의 이벤트만 실행하고 부모의 이벤트의 실행을 막으려면) e.stopPropagation(); 함수를 실행하면 됩니다. button.addEventListener('click', function(e) { // button에 click이벤트를 줍니다. container.style.backgrounColor = 'red'; // container의 style 중에서 back..

258. addEventListener 이벤트 주기 const btn = document.querySelector('button'); // 태그를 선택합니다. btn.addEventListener('click', function () { // click 이벤트를 줍니다. console.log("Clicked!") // 이벤트가 발생하면 실행할 코드입니다. }) 쓸만한 이벤트 종류입니다. click : 클릭 mouseenter : 마우스가 들어갈 때 mouseleave : 마우스가 떠날 때 mousedown : 클릭버튼을 누른 순간 mouseup : 클릭을 하고 뗀 순간 함수를 직접 만들지 않고, 아래와 같이 만들어 둔 함수를 넣을 수도 있습니다. function printClicked() { // 함수를..

250. 계층 이동 인접선택자 부모선택자 : .parentElement 제이쿼리에서 .parent() 함수입니다. 부모로 이동합니다. 연달아서 쓸 수 있습니다. p.parentElement.parentElement.parentElement 자식선택자 : .children 은 여러개 존재할 수 있고, 배열은 아니지만 인덱스로 선택할 수 있습니다. p.children // [b,span,strong] b를 선택하려면 p.children[0] 과 같이 인덱스를 써서 선택할 수 있습니다. 형제선택자 : .previousSibling, .nextElementSibling 로 이전 또는 다음 형제를 선택할 수 있습니다. 251. append(문자열마지막에 추가& 태그는 자식으로 추가) & appendChild(태그..

246. innerHTML > textContent > innerText innerHTML은 태그까지 다 가져옵니다. 가나다 ul을 가져오면 "가나다" textContent는 display:none; 처리된 글자도 다 가져옵니다. 나는디스플레이논나는P안의글자 span이 display: none; 이어도 p를 가져오면 "나는디스플레이논나는P안의글자"가 모두 가져와집니다. innerText는 display:none;으로 보이지 않는 글자는 가져오지 못합니다. p를 가져오면 "나는P안의글자"만 가져와집니다. span delicious 라는 녀석을 disgusting으로 바꿉니다. 247. 속성 (attribute) 객체의 속성에 접근하여 속성을 수정할 수 있습니다. document.querySelector('..