[JS] 17_문서 객체 모델(DOM)
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.
1. 문서 객체 모델 알아보기
1) 문서 객체 보델이란
- 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹문서를 체계적으로 정리하는 방법
2) DOM 트리
- 문서 객체 모델의 구조를 나타냄
- DOM을 구성하는 기본 원칙
- 모든 HTML 태그는 요소(Element) 노드 입니다.
- HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.
- HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다.
- 주석은 주석(comment) 노드입니다.
2. DOM 요소에 접근하고 속성 가져오기
1) DOM에 접근하기
① id 선택자로 접근하는 getElementByld() 메서드
document.getElementById("id명")② class값으로 접근하는 getElementsByClassName() 메서드
document.getElementsByClassName("class명")③ 태그 이름으로 접근하는 getElementsByTagName() 메서드
document.getElementsByTagName("태그명")④ 다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드
- DOM트리의 텍스트, 속성 노드까지 자유롭게 제어 가능하다.
노드.querySelector(선택자)
노드.querySelectorALL(선택자 또는 태그)- 여러 값이 한꺼번에 반환 될 경우에는 querySelectorAll() 메서드를 사용한다.
- 반환 값은 노드 리스트이다.
2) 웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티
요소명.innerText = 내용
요소녕.innerHTML = 내용
3) 속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드
getAttribute("속성명")
setAttribute("속성명", "값")3. DOM에서 이벤트 처리하기
1) DOM 요소에 함수 직접 연결하기
ex) 이미지를 클릭하면 알림창 표시
...
<img src="images/cup-1.png" id="cup">
...
<script>
var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
cup.onclick = function(){
alert("이미지를 클릭했습니다");
}
</script>2) 함수 이름을 사용해 연결하기
var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
cup.onclick = changePic; // cup을 클릭하면 changePic 함수 실행
function changePic() {
cup.src = "images/cup-2.png";
}3) dom의 이벤트 객체 알아보기
<script>
var cup = document.querySelector("#cup"); // id = cup인 요소를 가져옴
cup.onclick = function(event) {
alert("이벤트 유형: " + event.type + ", 이벤트 발생 위치 : " + event.pageX + "," + event.pageY);
}
</script>Event - Web API | MDN (mozilla.org)
Event - Web API | MDN
Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
developer.mozilla.org
4) this 예약어
- 이벤트가 발생한 대상에 접근하기위해 사용
...
<body>
<div id="container">
<img src="images/cup-1.png" id="cup">
</div>
<script>
var cup = document.getElementById("cup");
cup.onclick = function(event) {
alert("클릭한 이미지 파일 : " + this.src);
}
</script>
</body>
...5) addEventListener() 메서드 사용하기
- 한 요소에 여러 이벤트 처리기를 연결해 실행 할수있는 함수
요소.addEventListener(이벤터, 함수, 캡처 여부); //캡처여부 기본값 false6) css 속성에 접근하기
document.요소명.style.속성명
document.getElementById("desc").style.color = "blue";
4. DOM에서 노드 추가, 삭제하기
1) 노드 리스트
- DOM에서 노드 정보를 여러개 저장한 것
- 배열과 비슷하게 동작한다.
2) 텍스트 노드를 사용하는 새로운 요소 추가하기
| 순서 | 메서드 | 설명 |
| 1 | createElement() | 새로운 요소 노드를 만듬 |
| 2 | createTextNode() | 새로운 텍스트 노드를 만듬 |
| 3 | appendChild() | 텍스트 노드를 요소 노드의 자식으로 연결 |
| 4 | appendChild() | 요소 노드를 dom에 연결 |
3) 속성 값이 있는 새로운 요소 추가하기
| 순서 | 메서드 | 설명 |
| 1 | createElement() | 새로운 요소 노드를 추가 |
| 2 | createAttribute() | 새로운 속성 노드를 추가 |
| 3 | 속성 값 지정하기 | 속성값을 프로퍼티로 지정함 |
| 4 | setAttributeNode() | 속성 노드를 요소 노드의 자식으로 연결 |
| 5 | appendChild() | 요소 노드를 dom에 연결 |
4) 노드 삭제
- parentNode 프로퍼티로 부모노드를 찾아서 부모노드에서 삭제함
부모노드.removeChild(자식노드)