Web Programming(웹 프로그래밍) chapter5. JavaScript-3 복습내용

Web Programming(웹 프로그래밍) chapter5. JavaScript-3 복습내용

- HTML DOM(Document Object Model)

: 웹페이지가 로드될 때 브라우저가 DOM을 생성한다.

: object를 생성하면 각각의 properties와 method, events를 사용할 수 있다.

-> tree구조이다.

-> node 와 object는 같은말이라고 생각하면 된다.

-> html로 작성된 코드의 거의 모든 구성요소들이 dom에서 node로 표현된다.

-> document는 js에서 현재웹문서를 가리키는 node이다.

-> 그 노드의 method인 getElementById를 사용해서 특정 element의 node를 반환한다.

-> 반환된 node의 innerHTML이라는 property에 접근한 것이다.

- Finding HTML elements

: DOM을 이용해서 특정 element를 찾는 것.

-> 여러개이면 element[0],[1] 이런식으로 배열처럼 접근하면 된다.

-> 기본적으로 같은 이름을 가지면 다 저장된다.

-> All은 selector에 해당되는 모든 element들이 반환된다. -> node list 타입이다.

-> All이 없으면 하나의 element만을 반환한다.(여러개이면 첫번째것만 반환)

-> querySelectorAll("nav ul a: link") -> 여기서 공백은 descendant element에

접근하는 selector이다.

- Changing HTML

: innerHTML

-> text만 넣는것이아닌 element도 추가할 수 있는 강력한 기능이다.

: Attribute를 바꾸는 것

- DOM navigation

: relation을 바탕으로 child에 접근하려 할 때.

-> (1,2,3은 모두 같은 의미의 코드이다.)

- nodeName Property

: 해당 노드의 이름을 나타내기위한 property

- nodeValue Property

: 해당 노드의 값을 나타내기위한 property

- nodeType property

: 해당 노드의 type을 출력하는 property

- Creating New HTML Elements

: DOM을 사용해서 새로운 element들을 추가하는 것.

-> 1. text 노드 생성

2. element 생성

3. 의 child로 text를 추가함.

4. 3을 div에 추가함.

-> 특정 element 앞에 추가하고 싶을 때

- Removing HTML Elements

: DOM을 사용해서 element를 삭제하는 것.

: remove() method를 지원하지 않는 경우

-> removeChild를 사용

- Replacing HTML Elements

본 게시물은 부산대학교 웹응용 강의자료를 바탕으로 작성되었습니다.

from http://commencer-y.tistory.com/27 by ccl(A) rewrite - 2021-10-15 13:01:19