4장 예제를 이해하기위한 보충설명 DOM, DOM API 그리고 CSS 셀렉터

1. For non-developers!
Learn Javascript Programming!
!
Learning contents with!
DOM (Document Object Model)!
CSS Selector & DOM API!
!
!
!
!
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare
#4.1

2. 브라우저가 HTML을 다루는 방법!
잠깐! 브라우저가 뭔가요?!
조금 개발자스러운 답변을 원합니다.
브라우저란 HTML 문서를 읽고 해석한 후 !
해석한 결과를 바탕으로 스타일을 적용하고!
그 결과를 사용자에게 표시해주는 소프트웨어.!
*문서 해석과 스타일 적용은 문서의 내용이 변경될 때 마다!
반복적으로 일어나며 이 변경은 Javascript에 의해 !
빈번하게 발생할 수 있다.

3. 브라우저가 HTML을 다루는 방법!
읽기 결과 적용 표시
javascript
image
css
my.html DOM
1 2 3 4
DOM에 변화가 생기면 2~4 구간이 반복
읽고 분석한 결과를!
DOM 형태로 재구성
스타일 (CSS) 적용 화면에 최종 표시!
(랜더링)
변경

4. 브라우저가 HTML을 다루는 방법!
CSS 적용전 CSS 적용 Javascript 작동

5. 브라우저가 HTML을 다루는 방법! !
DOM, 돔, Document Object Model 이란?
HTML 문서의 요소를 효과적으로!
다루기(찾기, 추가, 삭제, 수정)위하여 모든 요소를!
분리하고 상하관계를 설정한 후 배치한 구조
프로그래머들은 이런 구조를!
나무(Tree) 구조라 부른다.

6. 브라우저가 HTML을 다루는 방법! !
DOM, 돔, Document Object Model 이란?
html
head body
title
text
h1
text
p
text a
text하나의 뿌리에서 가지를!
뻗는 나무와 비슷하다하여!
나무(Tree) 구조라고 부른다
document

7. DOM을 다루기 위해 제공되는 주요 기능들
document.getElementById
!
document.getElementsByName
!
document.getElementsByTagName
!
document.getElementsByClassName
!
document.querySelectorAll
지정한 ID를 가진 요소 찾기
지정한 이름을 가진 요소들 찾기
지정한 태그 이름을 가진 요소들 찾기
지정한 클래스 이름을 가진 요소들 찾기
지정한 CSS 셀렉터로 찾아지는 요소들 찾기

8. DOM을 다루기 위해 제공되는 기능 사용 예
html
head body
title
text
h1
text
p
text a
text
document
var eles = document.getElementsByTagName(‘h1’);
var eles = document.getElementsByTagName(‘a’);
*

9. CSS Selector 란?
CSS는 HTML의 요소에 스타일을 적용하기!
위한 목적으로 만들어 졌으며, CSS Selector는!
스타일이 적용될 대상을 결정하기 위해 제공된다.
CSS 선택자 (Selector)
선택된 대상들에 적용될 스타일

10. CSS Selector 란?!
DOM API vs. CSS Selector
html
head body
title
text
h1
text
p
text a
text
document
var eles = document.getElementsByTagName(‘h1’);
var eles = document.getElementsByTagName(‘a’);
*
h1 { … }
a { … }

11. CSS Selector 란?!
DOM API vs. CSS Selector
DOM API와 CSS Selector 모두 DOM 요소를!
탐색할 수 있으나 사용 목적은 완전히 다름!
!
DOM API는 DOM 요소의 추가, 수정, 삭제와!
같은 광범위한 목적을 가지고 있으며,!
!
CSS Selector는 스타일을 적용할 대상을!
선택하기 위해서만 제공된다.

12. 1 “다음시간에”;!
2 “잘자요~~;
Unclosed string.