0922 [VScode] JavaScript_DOM, 이벤트처리기1

<강의>

-웹표준정석 교재 17장 예제는 전부 암기하세요

-문서 작성 시 우선적으로 Element의 계층관계를 파악해야합니다

---

DOM(Document Object Model)

                                                                                                                 ㄴ=spec or 정의

 

 

composition relation

0. DOM: JS에서 객체를 사용해 웹 문서 접근 및 제어하여 체계적으로 관리하는 방법 

 

1. DOM에서 모든 Element, Attribute, Text는 객체이며, Document 객체의 Child(자식)이다.

 

2. 요소의 중첩관계는 객체 트리로 구조화하여 부모자식관계를 표현한다. 

     DOM Tree의 진입점(Entry Point)은 Document 객체이며, 최종점은 Element의 Text 객체이다.

    트리에서 가지가 갈라져 나간 항목을 노드(Node)라고 하며,

    트리 시작부분인 Html/Document를 루트노드(RootNode)라고 한다.

 

3. DOM을 통해 Web page

    1) 조작하려는 Element를 선택 or 탐색

    2) 선택한 요소의 Contents or Attribute

    를 조작(manipulation)한다. 

 

4. DOM은 CSS에서 Element를 구분하기 위해 정의한 선택자(id, class, 태그이름)로 Element에 접근해 속성을 변경한다.

    1) DOM Element 접근방식 5가지=Accessor★★★★★

	구분	Method	ex	비고
1	id 선택자로 접근	getElementById()	요소명.getElementById('id명'); document.getElementById('id명');	id는 단일생성
2	class 선택자로 접근	getElementsByClassName()	요소명.getElementsByClassName('class명');	class 중복생성가능
3	태그로 접근	getElementsByTagName()	요소명.getElementsByTagName('태그명'); document.getElementsByTagName('p');	반환값 HTMLElement 객체 :해당 HTML요소의 객체값만 저장된다. 이 경우 attribute, text control이 안돼서 노드접근방식 사용
4	id등 반환값이 1개인 노드 처리 시	querySelector(선택자)	노드.querySelector('#wrapper')	id인 경우 # 삽입 class인 경우 . 삽입
5	반환값이 2개이상인 노드(=NodeList) 처리 시	querySelectorAll(선택자 or 태그)	노드.querySelectorAll('.card')

   

   2) CSS 속성에 접근방식

    - document.요소명.style.속성명

                                             ㄴ하이픈이 있는 속성은 backgroundColor, borderRadius처럼 합쳐서 사용

 

querySelectorAll ('li')의 NodeList

 

DOM Element ex

 

DOM Node ex

 

5. 웹 요소 내용을 수정하는 innerText, innerHTML, textContent Property 

	Property	Desc.
1	innerText	:Text내용을 inner 안에 쓰겠다 -alert 시 사용자에게 보여지는 Text만 보여준다
2	innerHTML	:HTML내용을 inner 안에 쓰겠다
3	textContent	-alert 시 해당 Node가 가진 Text를 전부 보여준다

innerText, innerHTML ex

 

innerText, innerHTML, textcontent ex

 

---

이벤트와 이벤트 처리기

 

event객체의 property와 Method

1. 이벤트가 발생한 대상에 접근하려면 이벤트처리기에서 this를 사용해야 한다. (ex this.src)

 

2. addEventListener() 메소드

 -요소.addEventListener(이벤트, 함수, 캡쳐 여부)

 -이벤트와 이벤트핸들러 연결기              ㄴ기본값은 false

 -복수 이벤트를 삽입하고 싶을 때 사용

addEventListener() ex1_doit_getsetAttr

 

addEventListener() ex_doit_lightbox

 

---

 

<선생님 Comment>

-현장에선 요소 명칭 및 용어를 정확하게 사용해야합니다.

-9/26(다음주 월요일)까지 개인블로그 제출 

  https://beginning-of-june.tistory.com/72

0925 개인블로그 제작