○ 구조
HTML 파일 -Load-> Document Object (객체 트리 in Memory) -Show(javascript)-> 사용자 인터페이스
※ <script src="~~~"></script> 태그는 단일태그로 변경안됨
○ window.onload -> window.addEventListener
- 화면에 필요한 정보가 다 읽어지고 실행되는 이벤트 함수
- 각각의 js파일에서 사용하게 되면 마지막에 바인딩된 js파일에 onload만 적용됨
-> 이를 해결하기 위해 window.addEventListener 사용
ex) window.addEventListener("load", function(){ ~ } );
○ select API
- querySelector(), querySelectorAll()
- 노드선택을 CSS의 선택자로 선택할 수 있게 해줌
ex)
var doc = document.getElementById("ID명");
var el1 = doc.querySelector('.CLASS명');
var el2 = doc.querySelector('#ID명');
var el3 = doc.querySelectorAll("input[name='네임명']"); //여러개일경우
.....
○ 노드의 종류
Document
ㄴ DocumentType ------ <!DOCTYPE HTML PUBLIC ...........> (DOCTYPE)
ㄴ Element ----------- <textarea><p><font> (태그)
ㄴ Attr ------------ <textarea rows="30" cols="40"> (rows cols등 속성)
ㄴ Entity ---------- lt gt nbsp (< > 공백)
ㄴ EntityReference - &; (lt gt를 감싸고 있는 문자)
ㄴ Text ------------ 문자
ㄴ Comment ----------- <!-- --> (주석)
ㄴ CDATASection ------ <!CDATA[[ <, >]]> (특수문자사용)
ㄴ Notation ---------- "#ffff00" "10px" (속성값 중 표현형식을 사용하는 표기법)
○ childNodes 와 children
- childNodes는 빈공백, 주석, 텍스트 등 전부 자식 노드로 포함시킴
- children의 경우 태그형태로 되어있는것만 자식 노드로 포함시킴
'study > Javascript' 카테고리의 다른 글
| 7_[기본]_함수, 변수, 클로저 (0) | 2022.05.31 |
|---|---|
| 6_[기본]_JSON[JavaScript Object Notation(JSON)] (0) | 2022.05.30 |
| 5_[기본]_javascript_변수_배열_Object (0) | 2022.05.27 |
| 4_javascript_(정리) (0) | 2020.01.07 |
| 3_javascript_(DOM,이벤트,정규표현식) (0) | 2019.12.25 |