비개발자를 위한 Javascript 알아가기 #4.1
23 likes4,336 views
4장 예제를 이해하기위한 보충설명 DOM, DOM API 그리고 CSS 셀렉터
비개발자를 위한 Javascript 알아가기 #4.1
- 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.