H O M E

조회 API * 엘리먼트를 조회하는 기능 * document 객체는 문서 전체를 의미하는 엘리먼트로 document 조회 메소드는 문서 전체를 대상으로 조회한다. * Element 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회한다. html css JavaScript JavaScript Core DOM BOM - 결과 html css JavaScript JavaScript Core DOM BOM

식별자* 문서내의 특정한 엘리먼트를 식별하기 위한 API* HTML에서 엘리먼트 이름과 id, class를 식별자로 사용한다. - Element.tagName* 해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름은 변경이 불가능하다. html css JavaScript * 결과 html css JavaScript - Element.id html css JavaScript * 문서 내에서 id는 단 하나만 등장 할 수 있다. * 결과 html css JavaScript - Element.className html css JavaScript * 클래스는 여러개의 엘리먼트를 그룹핑할 때 쓰인다.* 결과 html css JavaScript - Element.classList html css JavaScript /..

Element 객체* 엘리먼트를 추상화한 객체이다.* DOM은 HTML뿐만 아니라 XML, SVG 등의 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격을 정의하고 있고, 각각의 구체적인 언어의 기능은 HTMLElement, SVGElement과 같은 객체를 통해추가하여 사용하고 있다. - DOM 계층 구조 -

HTMLElement * 객체를 찾고 찾은 객체가 어떤 객체인가 정보를 반환. * 실행결과가 하나인 경우. * 모든 엘리컨트들이 이를 상속받고 있다. HTMLCollection* 객체를 찾고 찾은 객체가 어떤 객체인가 정보를 반환.* 실행결과가 복수개인 경우* 유사배열로 배열과 비슷한 사용방법을 가지지만 배열은 아니다.,* HTML DOM에서 Collection은 문서가 변경될때 자동으로 업데이트되는 실시간의 의미이다. 따라서 목록이 실시간으로 변경된다. HTMLLIElement* 실행 결과가 List인 경우 HTMLAnchorElement* 실행결과가 Anchor(태그)인 경우 HTMLInputElement* 실행결과가 Input인 경우 DOM Tree* 모든 엘리먼트는 HTMLElement의 자식이다..

document.getElementsByTagName * 문서 내 해당 태그의 이름을 가진 객체를 반환한다.* 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다. - 사용법 document.getElementsByTagName("태그이름") - 예제 HTML CSS JavaScript -결과 HTML CSS JavaScript ☆ 조회 대상을 좁히려면 HTML CSS JavaScript HTML CSS JavaScript document.getElementsByClassName * class 속성 값 기준으로 객체를 반환 - 사용법 var obj..

window. open* 새 창 띄우기 1. 첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 2. 두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다. 3. _blank는 새 창을 의미한다. 4. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 5. 세번재 인자는 새 창의 모양과 관련된 속성이 온다. 6. 새 창에 접근 (보안상 문제로 서버 구축을 한 뒤 실습!) //onkeypress 이벤트는 사용자가 입력(this.value)을 완성할 때마다 winmessage(this.value) 함수를 실행 * 새 창을 띄우고 새 창과 커뮤니케이션 하는 방법이다.* 이..

Navigator 객체* 브라우저의 버전, 제품명 등 정보를 알 수 있는 기능.* 주로 호환성 문제 등을 위해 사용한다. 1. Navigator의 모든 프로퍼티 확인 console.dir(navigator); 2. appName alert(navigator.appName); * 웹 브라우저의 이름이다. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시한다. 3. appVersion alert(navigator.appVersion); * 브라우저의 버전. 4. userAgent alert(navigator.userAgent); * 브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용이다. appVersion과 비슷하다. 5. platfo..

Location 객체* 문서의 주소와 관련된 객체로, 현재 브라우저 창에 열려있는 URL을 알려주거나 문서의 URL을 변경하거나 문서의 위치와 관련한 다양한 정보를 얻을 수 있다. 1. 현재 문서의 URL 알아내기 alert(location.toString()); alert(location.href); //선호 console.log(location.toString(), location.href); 2. URL Parsing console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash); * protocol : 현재 문서의 프로토콜을 알려줌 * host : 각 서비스를 ..

alert* 경고창, 사용자에게 정보를 제공하거나 디버깅의 용도로 많이 쓴다.

웹브라우저의 구성요소들은 하나하나 객체화되어있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 분류라고 할 수 있다. JavaScript Core(Ecma Script Specification)* 변수, 데이터형, 제어루프, 조건문 등 Script 프로그래밍 언어의 핵심 기능이 포함되어 있다. * 웹브라우저에 따라 다르고, 기능을 추가하거나 제거할 수 있다. * JavaScript 자체에 정의되어 있는 객체가 속해있다. DOM (Document Object Model)* 문서 안의 요소를 액세스 하는 API.* 웹페이지의 내용을 제어한다. window의 프로퍼티인 documen..