※ DOM이란?
- HTML 문서를 파싱하여 자료를 구조화하고, 자바스크립트를 통해 HTML 문서를 동적으로 조작할 수 있도록 해주는 문서 객체 모델이다.
※ DOM 요소에 접근하는 방법
| document.getElementById("id"); |
주어진 아이디에 해당하는 단일 요소 반환 |
| document.getElementsByClassName("class"); |
주어진 클래스 이름과 일치하는 모든 요소 반환
(HTMLCollection으로 반환받기 때문에 배열처럼 반복 가능) |
| document.getElementsByTagName("tag"); |
주어진 태그 이름과 일치하는 모든 요소 반환
(HTMLCollection으로 반환받기 때문에 배열처럼 반복 가능)
|
| document.getElementsByName("name"); |
주어진 이름(name) 속성 값과 일치하는 모든 요소 반환
(주로 Form 요소에서 사용되며, NodeList로 반환받기 때문에 배열처럼 반복 가능)
|
| document.querySelector("selector"); |
주어진 CSS 선택자와 일치하는 첫 번째 요소 반환
(id, class, tag 등 다양하게 활용 가능) |
| document.querySelectorAll("selector"); |
주어진 CSS 선택자와 일치하는 모든 요소 반환
( NodeList로 반환받기 때문에 배열처럼 반복 가능)
|
| document.createElement("tag"); |
HTML 태그 element 생성 (appendChild랑 같이 자주 사용) |
※ DOM 요소를 조작하는 방법
| element.innerText; |
특정 요소 내의 텍스트를 반환 (사용자에게 보여지는 텍스트만 반환) |
| element.innerHTML; |
특정 요소 내의 HTML 콘텐츠를 반환 |
| element.textContent; |
특정 요소 내의 텍스트를 반환 (사용자에게 보여지지 않는 텍스트도 반환) |
| element.setAttribute("data-idx", "value"); |
특정 요소에 속성값을 설정 (속성값이 없을 경우 새로운 속성값 생성) |
| element.getAttribute("data-idx"); |
특정 요소의 속성값을 반환 |
element.classList.add("class-name");
|
특정 요소에 클래스 추가 |
element.classList.remove("class-name");
|
특정 요소의 클래스 제거 |
| element.classList.toggle("class-name"); |
특정 요소의 클래스 토글 (주어진 클래스가 있을 경우 제거 / 없을 경우 생성) |
| element.style.CSS속성 = "지정할 속성"; |
요소의 인라인 스타일을 직접 조작 |
| parentEle.appendChild(ChildEle) |
특정 부모 요소에 자식 요소 추가 |
| parentEle.removeChild(ChildEle) |
특정 부모에서 자식 요소를 제거 |
※ 이벤트 리스너
- 사용자의 인터렉션에 따라 특정 함수를 실행시켜야 할 경우 사용한다.
element.addEventListener('이벤트', function() {
// 이벤트 발생 시 실행할 코드
});
| 이벤트 |
설명 |
| click |
요소를 클릭할 때 발생하는 이벤트 |
| change |
입력 요소의 값이 변경될 때 발생하는 이벤트. |
| submit |
폼을 제출할 때 발생하는 이벤트 |
| keydown |
키보드의 키를 누를 때 발생하는 이벤트 |
| mouseover |
요소에 마우스가 올라갔을 때 발생하는 이벤트 |
| mouseout |
요소에서 마우스가 떠나갔을 때 발생하는 이벤트 |
| scroll |
페이지나 요소를 스크롤할 때 발생하는 이벤트 |
| load |
페이지나 리소스가 완전히 로드될 때 발생하는 이벤트 |
| resize |
창 크기가 변경될 때 발생하는 이벤트 |
