부트캠프교육중/DOM11 기억안난거 다시 공부한것 #getElementById() element = document.getElementById(id); -id를 통해 엘리먼트를 반환한다. -만약 document에 구체적인 id의 엘리먼트가 없다면 null을 반환한다. #setAttribute() -선택한 요소(element)의 속성(attribute)값을 정한다. -element.setAttribute(attributename, attributevalue) -attributename에는 속성이름, attributevalue에는 속성값 # createElement -요소노드생성 #append 1.여러개의 요소를 추가 2. text로 추가가능 3.return 값이 존재하지않는다. (undefined) 4.prepend -그냥 append는 부모요소의 맨 하.. 2023. 2. 14. [DOM] 유효성검사 (회원가입창만들기) 회원가입창만들기 1. HTML을 먼저 작성한다. 2. JS에다가 작성한다. 아이디를 먼저 불러온다. let elInputUsername = document.querySelector('#username') 3. HTML에다가 메세지 일단 다 보이게 만든다 아이디는 네글자 이상이어야 합니다 이걸 수정한다. 아이디는 네글자 이상이어야 합니다 사용할수 있는 아이디입니다 일단 메세지 다 보이게 만들고 나중에 JS로 작동하면된다. 4. JS에다가 let elFailureMessage = document.querySelector('.failure-message') let elSuccessMessage = document.querySelector('.success-message') 5. CSS에다가 메세지가 사라지고 .. 2023. 1. 7. [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. 이전 1 2 3 다음