목차 innerText 예제 - 요소의 텍스트 내용 반환 innerText 예제 - 요소의 텍스트 내용 설정 innerText / textContent 차이점 innerText 예제 - 요소의 텍스트 내용 반환 <button oncl…

innerHTML예제 <p id="demo">세상에서 가장 좋은 홈페이지?</p> <button onclick="homzzang()">클릭</button> <script> function hom…

getAttribute() 예제 <style> .hz { color: red;} </style> <h1 class="hz">홈짱닷컴 Homzzang.com</h1> <button onclick="homzzang()">클릭<…

목차 focus() 예제 - a 요소에 포커스 주기 focus() 정의 focus() 구문 focus() 예제 - input 요소에 포커스 주기 focus() 예제 - 로드 시 바로 input 요소에 포커스 주기 focus() 예제 - a 요소…

firstChild 예제 <ul id="hz"><li>홈짱닷컴</li><li>Homzzang.com</li></ul> <button onclick="homzzang()">클릭</button> <p id="…

목차 contains() 예제 - 매개변수가 자손노드인지 판별 contains() 정의 contains() 구문 contains() 예제 - 매개변수가 자손노드인지 판별 <style> #box {border: 1px so…

목차 clientWidth 예제 - 요소 가시 너비 clientWidth 정의 clientWidth 구문 clientWidth 예제 - offsetWidth와의 차이점 clientWidth 예제 - 스크롤바 생긴 경우 clientWidth 예제…

목차 click() 예제 - 마우스오버 시 클릭 이벤트 발생 click() 정의 click() 구문 click() 예제 - 클릭메서드 이용해 배경색 자동 변경 click() 예제 - 마우스오버 시 클릭 이벤트 발생 <fo…

※ Element.className = 'class names' : 기존에 class가 없으면 추가해 넣고, 있으면 기존 것을 변경. ※Element.classList.add('class names') : 기존 class에 새로운 클래스를 추가. className 예제 <style> .box…

목차 className vs. classList.add() 차이 classList 예제 - 클릭 시 .hz 클래스 추가 classList 예제 - 클릭 시 (보이기/숨기기) 토글 처리 classList 예제 - 위에서 미끄러져 내러오는 모달 (= 상단 슬라이드 모달) …