DOM

Keyword overview

---

DOM

---

---

The Code Card

---

DOM

https://lshjju.tistory.com/720

DOM

---

DOM Selection and Manipulation

https://lshjju.tistory.com/719

DOM Selection and Manipulation

---

DOM Event Handling

https://lshjju.tistory.com/718

DOM Event Handling

---

DOM Node

https://lshjju.tistory.com/717

DOM Node

---

DOM class property

https://lshjju.tistory.com/716

DOM class property

---

---

Code training

---

---

19-1 문서 객체 모델 알아보기

---

---

문서 객체 모델이란

---

---

DOM 트리

---

HTML의 요소 관계 알아보기

https://github.com/lshjju/doit-hcj-new/blob/main/19/domTree.html

---

HTML 요소의 계층 구조 

img

---

---

19-2 DOM 요소에 접근하고 내용 수정하기

---

---

DOM 요소에 접근 하기

---

---

getElement 함수 사용하기

---

하나만 콕 집어내는 querySelector() 함수

---

모든 요소를 가져오는 querySelectorAll() 함수

---

---

---

웹 요소의 내용을 가져오고 수정 하기

---

---

웹 요소의 내용에 접근하기

 

텍스트에 접근하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/text-1.html

---

---

웹 요소의 내용 수정하기

 

클릭했을 때 내용, 이미지 변경하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/text-2.html

---

---

19-3 DOM에서 이벤트 처리하기

---

---

DOM 요소에 함수 연결 하기

---

이미지를 클릭했을 때 실행할 함수 작성하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/event-1.html

---

이미지를 클릭했을 때 실행할 함수 이름 지정하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/event-2.html

---

---

DOM의 event 객체 알아보기

---

이벤트 발생 위치 알아내기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/event-3.html

---

이벤트 객체의 주요 프로퍼티와 메서드

img

---

this 예약어 사용하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/event-4.html

---

---

addEventListener() 함수 사용하기

---

마우스 포인터를 올리면 이미지 바꾸기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/event-5.html

---

이벤트 리스너 안에서 함수 선언하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/event-6.html

---

---

CSS 속성에 접근하기

---

도형의 테두리와 배경색 바꾸기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/domCss.html

---

---

실습 - 라이브 박스 효과 만들기

---

1단계 - 프로그램의 흐름 정리하기

2단계 - DOM 요소 가져오기 섬네일 이미지 보여 주기

3단계 - 섬네일 이미지를 클릭하면 라이트 박스에서 보여 주기

4단계 - 라이트 박스 감추기

 

준비

https://github.com/funnycom/doit-hcj-new/blob/main/19/lightbox.html

완성

https://github.com/funnycom/doit-hcj-new/blob/main/19/results/lightbox.html

---

---

19-4 DOM에서 노드 추가·삭제하기

---

---

노드 리스트란

---

노드 리스트 살펴보기

https://github.com/lshjju/doit-hcj-new/blob/main/19/nodeList.html

---

---

내용이 있는 텍스트 노드 추가하기

---

---

1 요소 노드 만들기 - createElement() 메서드

---

2 텍스트 노드 만들기 - createTextNode() 메서드

---

3 자식 노드 연결하기 - appendChild() 메서드

---

---

---

속성값이 있는 요소 새로 추가하기

---

---

1 요소 노드 만들기 - createElement() 메서드

---

2 속성 추가하기

---

3 자식 노드 연결하기 - appendChild() 메서드

---

---

---

실습 - 텍스트 필드에 입력한 값을 화면에 표시하기

---

1 HTML 파일 확인하기

2 새로운 요소 만들고 연결하기

3 버튼에 click 이벤트 추가하기

4 버튼의 기본 동작 취소하고 함수 실행하기

 

준비

https://github.com/lshjju/doit-hcj-new/blob/main/19/create.html

완성

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/create.html

---

---

노드 삭제하기

---

---

실습 - 추가한 항목을 클릭하여 삭제하기

---

1 이벤트 위임하기

2 이벤트 대상 요소 삭제하기

 

준비

https://github.com/lshjju/doit-hcj-new/blob/main/19/delete.html

완성

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/delete.html

---

---

19-5 class 속성 추가·삭제하기

---

---

classList 프로퍼티

---

---

class 속성 추가 삭제하기

---

2가지 클래스 스타일 정의하기

classList에 추가 삭제하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/button-1.html

---

class 속성 토글하기

https://github.com/lshjju/doit-hcj-new/blob/main/19/results/button-2.html

---

---

---

Copyright

이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB

---