안녕하세요

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('..

243. getElementById : id로 찾습니다. const banner = document.getElementById('banner') I ♥ unicorns https://devsprouthosting.com/images/unicorn.jpg" id="unicorn" alt="unicorn"> PRACTICE : unicorn, mainheading 이라는 id를 가진 태그를 image, heading 변수에 저장하기 const image = document.getElementById("unicorn") const heading = document.getElementById("mainheading") 244. getElementsByTagName & className : 여러개의 tag나 cl..