웹페이지가 로드될때, 브라우저는 그 페이지의 DOM(Document Object Model)을 생성한다.
HTML DOM 모델은 객체들의 트리구조로 구성되어있다.
HTML DOM이 있다면, 자바스크립트는 HTML document의 모든 요소들(elements)에 접근할수있고 바꿀수있다.
객체모델이 있다면, 자바스크립트는 동적인 HTML을 생성할때 필요한 모든 권한을 가진다:
- JavaScript can change all the HTML elements in the page (모든 요소 변경가능)
- JavaScript can change all the HTML attributes in the page (모든 속성 변경가능)
- JavaScript can change all the CSS styles in the page (모든 CSS styles 변경가능)
- JavaScript can remove existing HTML elements and attributes ( 존재하는 HTML요소 와 속성 제거가능)
- JavaScript can add new HTML elements and attributes (새로운 HTML 요소 와 속성 추가 가능)
- JavaScript can react to all existing HTML events in the page (존재하는 모든 HTML 이벤트에 반응할수 있음)
- JavaScript can create new HTML events in the page (새로운 HTML 이벤트 생성가능)
이벤트 흐름
캡쳐단계, 버블단계 in DOM
해당 버튼을 클릭시 실행되는 이벤트를 캡쳐단계, 이벤트실행시킨후 이벤트가 소멸하는 단계를 버블단계라고한다.
직접 캡쳐 리스너일때 실행함수와, 버블리스너일때 실행함수 구현 코드
캡쳐단계일때 실행할 capFunc 함수는 addEventListener의 3번째 매개변수가 true일때 실행되고, 버블단계는 false일때 bubbleFunc 함수를 실행한다.
BOM(Browser Object Model)
참고
JavaScript HTML DOM
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'언어 > 자바스크립트' 카테고리의 다른 글
| [Javascript] this, 전역변수, 전역객체 feat . configurable, defineProperty() (0) | 2022.06.18 |
|---|---|
| [Javascript] 스코프, 스코프 체인, outerEnvironmentReference (0) | 2022.06.16 |
| [Javascript] 호이스팅(2), 함수선언문, 함수 표현식(익명, 기명) (0) | 2022.06.13 |
| [Javascript] 호이스팅(Hoisting ), 실행컨텍스트(execution context) (0) | 2022.06.13 |
| [Javascript] 깊은복사, 얕은복사 (0) | 2022.06.08 |