부트캠프교육중301 [DOM] 이벤트객체 POS기에서 아메리카노와 카페라떼를 주문하려는 장면이라고 생각하자! let menus = document.querySelectorAll("button"); //모든 버튼을 가져온다. let btnAmericano = menus[0]; let btnCaffelatte = menus[1]; btnAmericano.onclick = handleClick; btnCaffelatte.onclick = handleClick; function handleClick() { // 아래의 빈칸(__)을 채우세요. let currentMenu = __; console.log(currentMenu + "를 클릭하셨습니다."); } 두버튼의 이벤트 핸들러가 동일한 함수에 의해 동작한다. 어떤 메뉴가 추가되더라도, 하나의 함수를.. 2023. 1. 7. [DOM] Delete Delete 삭제 DOM을 이용하여 HTML Element를 삭제하는 방법이다. 1. remove 삭제하려는 요소의 위치를 알고 있는경우에 사용 const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) tweetDiv.remove() 2. innerHTML 모든 자식의 요소를 지울수있다 그러나 보안문제로 사용을 권장하지 않는다 3. removeChild 자식요소를 지정해서 삭제하는 메서드이다 모든 자식요소를 삭제하기 위해 반복문(while, for, etc)을 활용할수있다 const container = document.querySe.. 2023. 1. 6. [DOM] Update update 변경, 갱신 DOM을 이용하여 HTML Element를 변경한다 const oneDiv = document.createElement('div'); console.log(oneDiv) // oneDiv라는 이름의 요소를 만들었다 1. 문자열을 입력한다 textContent를 이용해서 비어있는 div element에 문자열을 입력한다. oneDiv.textContent = 'dev'; console.log(oneDiv) // dev 2. class를 추가한다. css스타일링이 적용될수 있도록, div element에 class를 추가한다. oneDiv.classList.add('tweet') console.log(oneDiv) // dev 다시 append를 이용해 container의 자식요소로.. 2023. 1. 6. [DOM] Read DOM을 이용하여 HTML element를 조회하는 거다 DOM으로 HTML element의 정보를 조회하기 위해서는 querySelector의 첫번째인자로 셀렉터(Selector)를 전달하여 확인할수있다. 셀렉터로는 HTML요소("div"), id("#tweetList"), class(.tweet) 세가지가 가장 많이 사용된다. 1. querySelector querySelector에 '.tweet'을 첫번째인자로 넣으면 클래스이름이 tweet인 HTML element중 첫번째 엘리먼트를 조회할수 있다. querySelector로 클래스이름이 tweet인 HTML요소를 조회한다. const oneTweet = document.querySelector('.tweet') HTML 문서에는 클래스이름이 tw.. 2023. 1. 6. 이전 1 ··· 60 61 62 63 64 65 66 ··· 76 다음