$$config title: jquery 공부 위키 keywords: - IT - js $$ # 개요 - 221201~ - 공부기록 아카이빙 페이지 현재 목표 - jquery ~ 2장 01 184p까지 - 주요 부분 1장 01, 02 94p # Day1 ## js 기초 지식 - 변수 - 지역 / 전역 변수 - 형변환 (문자<-> 숫자) - if, switch, while, for - 배열 - 함수 1. js core - 기본 문법과 구조, 데이터 타입, 조건문, - 반복문, 함수, 기본 라이브러리 2. js bom - 브라우저와 관련된 window, navigator - location, history, document, screen 객체 3. js dom - 문서를 조작할 때 사용 - element, style, attribute, event 제어 - **여기선 dom을 다룰것** - 동적 ## 20-23p, dom 객체와 인터페이스 dom은 지켜야할 약속만 적혀있는 문서 인터페이스는 dom의 이해를 돕는 촉매제 - USB 인터페이스 브라우저 제작사는 dom에 명시돼 있는 인터페이스에 맞춰 자신들만의 특화된 고유기술을 이용해 독자적 기능 구현. 유저 or 개발자가 사용하는 브라우저가 다르더라도 거의 똑같은 결과를 얻을 수 있음. ## 24p, 프로그램의 독립화 dom은 이 개념을 구현하기 위해 IDL로 작성되어 있음 - `IDL` : interface definition language ## 26p, Dom과 html 페이지와의 관계 1. HTML 페이지 로딩 2. 파싱 단계를 거쳐 웹페이지에 작성된 태그와 매칭되는 dom 객체 생성 - 웹페이지에 작성된 노드와 1:1 매칭되는 dom 객체로 변환 3. 브라우저 화면에 출력 => 브라우저 ## 27p. 노드와 dom 객체와의 관계 `노드` : HTML 웹 페이지 구성요소의 가장 작은 단위 태그 뿐만 아니라 텍스트, 주석까지 해당 # Day2 ## 28p DOM 객체의 종류 DOM은 하나가 아닌, 여러 개의 DOM 객체로 구성되어 있으며, 각자 고유의 책임과 기능이 있음 1. Node - node 객체에는 노드를 다루는 기본 기능과 프로퍼티를 제공 - 노드 탐색, 조작 2. Document - 텍스트, 엘리먼트, 속성 노드를 생성 - 노드를 생성하는 팩토리 메소드로 구성 3. Element - HTML, XML 태그 요소의 기본 기능과 프로퍼티를 제공 - 속성과 이벤트 제어 4. Text - 텍스를 다루는 기능 5. Attribute - 속성을 다루는 기능 6. HTML Document - Document 객체를 확장해 HTML용 프로퍼티와 메소드를 추가한 객체 - ex) body 속성 7. HTML Element - Element 객체를 상속받은 HTML 태그 요소 전용 - HTML 태그 요소의 기본 기능과 프로퍼티를 제공 - ex) ClassName, style 등이 이 객체에 존재 ## 29p 핵심 DOM 객체 요약 타입에 따라 다시 여러 그룹으로 나눠지는데, 가장 자주 사용하는 4가지 그룹 - style은 노드 타입이 아님 1. Document 노드 - Document, HTML Document 2. 속성 노드 - HTML div element - id, data-role 등 각각 속성 노드로 구성 - 속성 노드는 엘리먼트의 프로퍼티 - ex) ```html

``` 3. 텍스트 노드 - ex) ```html

이 내용이 바로 텍스트 노드입니다.

``` 4. 엘리먼트 노드 - Element, HTML Element - HTML div Element `

`, - HTML Anchor Element `` - HTML Paragraph Element `

` - HTML Body Element `` ## 28p 핵심 DOM 객체 소개 ![](https://velog.velcdn.com/images%2Fdiveforme%2Fpost%2Fe1e3143e-2551-497c-9e6d-a60eac587561%2Fimage.png) ### 1. Node 객체 즉, 노드 객체는 DOM 객체 가운데 가장 최상위 객체이자 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메소드가 정의되어 있는 Node 인터페이스를 구현한 객체 ### 2. Element 객체 `Node - Element` - 더불어 HTML과 XML의 태그 노드를 조작하기 위한 기본적이 프로퍼티와 메소드가 포함됨 - **주요 기능** - 태그 이름이 담기 프로퍼티와 속성(attribut)을 알아내고 설정하는 기능 - 이벤트를 추가, 삭제, 발생시키는 기능 ### 3. HTML Element 객체 - `Node - Element - HTML Element` - HTML div element, HTML Image Element, HTML Body Element와 같은 객체의 부모 객체 - 오직 HTML 페이지의 p, div 태그와 같은 HTML 태그에서만 사용가능한 속성과 기능 포함 - id, className 속성 - 오프셋 위치, 마우스/키보드 이벤트 관련 기능 ### 4. Document 객체 - `node - Document` - **HTML과 XML 문서의 루트 객체** - ***주요기능** - Element 노드와 이벤트, 텍스트, 주석 노드까지 생성하는 팩토리 기능 - id, className, tagName으로 특정 노드를 찾는 기능 - 여기에 이벤트 발생 및 등록시키는 이벤트 모델 기능 ### 4. HTML Document 객체 - `Node - Document - HTML Document` **HTML 문서 전용 Document 객체** - body와 같은 HTML 문서 전용 프로퍼티가 포함 - HTML 문서 전용 프로퍼티와 메소드가 포함 - HTML Document 객체에는 HTML 페이지 로딩 후 파싱 단계에서 만들어진 html, head, body 객체를 비롯해 **페이지에 작성된 태그와 일대일로 매칭**되는 **모든 Node 객체를 가지고 있는 객체** ### 5. Text 객체 - `Node - Element - Text` - 개행문자도 텍스트 노드 ### 6. Attibute 객체 - `Node - Attrbute` - id와 같은 태그의 속성 정보를 조작하는 기본 프로퍼티와 메소드 포함 ```html

샘플페이지 입니다.

``` ``` - Attr 객체에 접근하려면 먼저 Element 객체의 프로퍼티 가운데 attr가 어떤 객체의 인스턴스인지 알아야 함. - attr의 프로퍼티 객체 타입은 NamedNodeMap 객체의 인스턴스로서의 일종 - NodeList와 같은 컬렉션 객체 - 이 객체는 태그에 설정된 속성과 일대일 매칭되는 Attr 객체의 인스턴스를 요소로 갖고 있음 ``` ``` - 즉, div 태그에 id, data-role, styleㅇ로 3개의 속성이 정의 되어 있다면, Element 객체의 attr 프로퍼티에는 총 3개의 attr 객체 인스턴스가 존재하며, 이를 이용해 속성값 제어 ``` ## ~39p 핵심 1. 목표 : 사용할 기능이 어떤 객체에서 제공하는지 판단할 수 있어야 한다. 2. 핵심 : DOM 객체 간의 관계는 `상속`관계 - OOP의 개념이 DOM에도 사용됐구나 정도 - 여기서 상속이란 - 부모의 모든 기능 (프로퍼티 + 메소드)를 그대로 사용 가능하다는 것 3. DOM 학습법 : 상위 인터페이스 기능 습득 - 하위 인터페이스 습득 # DAY3 # 노드 다루기 가이드 문서의 내용을 동적으로 변경하려면 먼저 원하는 노드를 찾아야함. 1순위 : 노드찾기 2순위 - 노드 생성 - 노드 삭제 - 노드 이동 # 노드 찾기 ## 46p 문서에서 특정 태그명을 지닌 노드 찾기 - `Document 객체의 getElementsByTagName()` : 전체 문서에서 태그명이 div인 엘리먼트를 모두 검색 가능 - ex) ```html // 문서에서 태그명이 div인 엘리먼트 노드 찾기 var divs = window.document.getElementsByTagName("div"); alert("전체 문서에서의 div 엘리먼트의 개수 : " + divs.length); ``` ### 활용 ```html // 전체 문서에서 태그명이 div인 엘리먼트 찾기 var divs = window.document.getElementsByTagName("div"); alert("전체 문서에서의 div 엘리먼트의 개수 : " + divs.length); for(var i = 0; i < divs.length; i++) { // 찾은 노드에서 n번째 노드에 접근해 var div = divs.item(i); // 스타일 변경하기 div.style.borad = "1px solid #ff0000"; } ``` ## NodeList 객체 getElementsByTagName()의 결과 값은 검색된 모든 노드를 NodeList라는 객체에 담아 반환됨 - 배열과 비슷한 일종의 Collection 객체로서, Dom의 객체 중 하나 - NodeList 객체에서 제공하는 프로퍼티와 메소드는 length와 item() 메소드 둘 뿐 - `length` : 결과값의 전체 개수 정보 - `item()` : 결과값 항목별로 접근 시 사용 - item() 대신 배열을 사용하듯 divs[0]과 같은 식으로도 특정 항목에 접근 가능 ## 48p 특정노드의 자식노드에서 특정 태그명을 지닌 노드 찾기 - Element 객체의 메소드인 getElementsByTagName()을 사용 - ```html var divs = window.document.getElementsByTagName("div"); // 찾은 노드 가운데 2번째 노드의 자식 노드 중 태그명인 div인 엘리먼트 찾기 var div2 = divs[2]; var div2Child = div2.getElementsByTagName("div"); for(var i = 0; i < div2Child.length; i++){ divsChild[i].style.border = "4px solid #ff0000"; } ``` ### document와 element의 getElementsByTagName() 차이 document : 문서 전체에서 element : 엘리먼트 전체 중에서 ## 49p 문서에서 특정 클래스가 적용된 노드 찾기 - `Document 객체의 getElementsByClassName()` 사용 - [예제소스](https://codepen.io/jiin-coder/pen/QWxoGyJ) - ```html //문서 전체에서 content_data라는 클래스가 적용된 엘리먼트 찾기 var contentData = window.document.getElementsByClassName("content_data"); for (var i = 0; i < contentData.length; i++) { contentData[i].style.border = "4px solid ##ff0000"; } ```

게시글 상세