JavaScript 개발자 수업 64일차 - Timer, DOM, Content

1. Timer

2. DOM

3. Content

---

1. Timer

[ 정의 ]

- window 객체 메소드이다.

- 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 해준다.

이름	설명
number setTimeout(함수, 시간(ms))	- 해당 함수 실행 후 지정한 시간이 되는 순간 함수를 실행한다. - 실행횟수: 1회 실행한다. - 초기화 메소드: void clearTimeout(타이머 ID)
number setInerval(함수, 시간(ms))	- 해당 함수 실행 후 지정한 시간마다 함수를 실행한다. - 실행횟수: 반복(무한) 실행한다. - 초기화 메소드: void clearInterval(타이머 ID)

 

[ setTimeout 예제 1 - bgColor 변환 ]

See the Pen timer 예제1 by yhyuk (@yhyuk) on CodePen.

 

[ setInterval 예제 2 - 현재 시간 만들기 ]

See the Pen setInterval 예제2 by yhyuk (@yhyuk) on CodePen.

 

[ setInterval 예제 3 - bgColor 변환 ]

See the Pen setInterval 예제3 by yhyuk (@yhyuk) on CodePen.

 

[ setInterval 예제 4 - 이미지 변환 ]

See the Pen setInterval 예제4 by yhyuk (@yhyuk) on CodePen.

 

2. DOM

[ 정의 ]

- Document Object Model

- 현재 HTML의 모든 태그를 사용해서 트리 구조를 생성 및 제공한다.

- BOM(Browser Object Model)과 달리 모든 태그를 인식한다.

- 검색 및 조작 도구를 추가 제공한다.

- 태그를 동적 추가 및 삭제가 가능하다.

- CSS, PCDATA 조작이 가능하다.

- 모델: DOM Level 1 ~ 3

- BOM 기반으로 생성 되었으며, 모든 DOM 기능이 document를 통해서 정의(사용)된다.

 

[ DOM 태그 검색 도구 ]

- BOM으로 검색하던, DOM으로 검색하던 찾은 결과 객체는 동일한 타입이다.

  1) id 검색 (*****)

  - object getElementById("id");

  - 유일한 객체(태그)를 찾는 의미 

  - 계층 구조를 고려할 필요가 없다. (BOM처럼 window.document... 이런식으로 필요가 없다.)

See the Pen DOM id 예제 by yhyuk (@yhyuk) on CodePen.

 

  2) class 검색 (***)

  - collection getElementsByClassName("class");

  - 같은 이름의 class를 가진 태그 집합을 반환한다.

  - 유사 배열

See the Pen DOM class 예제 by yhyuk (@yhyuk) on CodePen.

 

  3) 태그명 검색

  - collection getElementsByTagName("tag name");

  - 태그명을 검색 후,  태그 집합을 반환한다.

See the Pen DOM tag-name 예제 by yhyuk (@yhyuk) on CodePen.

 

  4) name 검색

  - collection getElementsByName("name");

  - BOM에서 사용하는 name 식별자를 지원하기 위해서 추가된 기능이다.

  - name을 검색 후 태그 집합을 반환한다.

See the Pen DOM name 예제 by yhyuk (@yhyuk) on CodePen.

 

3. Content

- Content는 DOM 전용이다

- <div>Content</div>

- getter, setter (읽기, 쓰기)

 

[ 프로퍼티 종류 ]

  1) innerText

  - 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티

  - 내용물을 파싱하지 않는다. (해석하지 않고 있는 그대로 입출력)

  - 비 표준 프로퍼티(MS), 하지만 모든 브라우저에서 지원한다.

See the Pen innerText 예제1 by yhyuk (@yhyuk) on CodePen.

 

  2) innerHTML

  - 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티

  - 내용물을 파싱한다. (구문이 존재하면 해석해서 실행한다.)

  - 표준 프로퍼티

See the Pen innerHTML 예제 by yhyuk (@yhyuk) on CodePen.

 

  3) textContent

  - innerText와 동일한 프로퍼티

  - 표준프로퍼티

 

[ Content 활용 예제 1 ]

See the Pen innerHTML 활용 예제 1 by yhyuk (@yhyuk) on CodePen.

 

[ Content 활용 예제 2 ]

See the Pen innerHTML 활용 예제 2 by yhyuk (@yhyuk) on CodePen.

 

[ Content 활용 예제 3 ]

See the Pen innerHTML 활용 예제 3 by yhyuk (@yhyuk) on CodePen.

 

---

MEMO>

# html파일은 개발자도구를 열지 않는 이상 어떤 에러가 발생했는지 모르는데, 그 에러를 찾게 도와주는 'ESLint'를 오늘 수업 때 배웠는데, 너무 빨리 수업이 지나가서, 정리해서 블로그에 올려야겠다.

# JavsScript의 BOM, DOM 구분 잘하고, 특히 오늘부터 배운 DOM은 확실히 개념잡도록 하자.

# 수업시간에 주는 문제가 시간 핑계로 자꾸 밀리는데 틈날때마다 꼭 풀 것.