Dev. Language/Javascript (26) 썸네일형 리스트형 DOM HTML 인터페이스를 사용하여 프로퍼티 변경 [예제] + HTMLTableRowElement 인터페이스에는 insertCell이라는 메소드가 있는데, 특정 테이블의 셀을 나타내는 또 다른 HTMLElement를 생성한다. 텍스트를 추가하려면 createTextNode 팩토리 객체를 생성한다. 이 객체는 메소드로 넘겨지는 문자열을 포함하는 text 객체를 생성한다. 그리고 이 text 객체는 appendChild를 이용해 테이블 셀 객체에 추가된다. (한 줄을 지우고 싶을 땐 removeRow를 사용하며, 인자로 지우고 싶은 줄을 쓴다.) 이와 같이 DOM HTML API를 사용해서 웹페이지에 객체를 추가하고 제거하는 것은 그다지 어렵진 않다. 특정 HTML엘리먼트를 직접적으로 가리키지 않는 DOM HTML 인터페이스도 있다. 문서 객체를 통해 접근.. DOM HTML API + HTML 객체와 HTML 객체 프로퍼티 대부분의 HTML 인터페이스 객체는 Element 와 Node 객체의 프로퍼티와 메소드를 상속받는다. 그리고 HTMLElement 또한 대부분 상속받는다. HTMLElement에는 id, title, lang, dir, className과 같은 프로퍼티들이 있다. 각 인터페이스 객체 이름은 HTML 폼 엘리먼트 이름을 본따서 만든다. 그렇지만 꼭 태그명을 본따서 만들 필요는 없다. 예를 들어, HTMLFormElement는 HTML 폼 엘리먼트의 인터페이스 객체이고, HTMLParagraphElement는 문단 태그(P)에 대한 객체이다. 이러한 객체들을 통해 엘리먼트의 모든 유효한 속성에 접근할 수 있다. 예를 들어 HTMLDivElement를 통해서 alig.. DOM의 두 가지 인터페이스 W3C에서 DOM 1을 발표할 때 API 두 가지도 함께 발표했다. 즉 Core API와 HTML API도 함께 발표하였다. DOM 코어는 언어와 모델에 독립적인 API다. 즉, 자스 뿐만 아니라 다른 언어를 사용해서 구현 가능하며 XHTML 뿐 아니라 다른 XML 기반 모델에도 사용할 수 있다. 이것이 DOM의 핵심이다. DOM이 릴리즈 되기 전에는 각 브라우저 회사별로 BOM을 구현해놓았다. W3C는 이미 구현되어 있는 BOM과 호환되도록 DOM API 일부분으로 DOM HTML API를 만들었다. DOM HTML API는 객체지향적이고 계층 구조로 되어 있다. 그리고 각 HTML 엘리먼트에 해당하는 객체를 만들어 놓았다. 예를 들어, HTML 문서에 해당하는 것은 HTMLDocumentElement.. DOM(Document Object Model) DOM은 플랫폼과 언어에 중립적인 인터페이스로, 프로그램과 스크립트를 사용해서 동적으로 접근할 수 있도록 하며, 문서의 내용,구조,스타일을 변경할 수 있다. 그리고 기존 문서에 추가적인 작업을 할 수 있으며, 처리 결과를 현재 페이지에 나타낼 수 있다. DOM 1 : 1998년에 권고안 발표. DOM에 대한 Infra Structure를 정의하는데 도움이 되었다. (DOM 향후 버전에서 기본 기능으로 사용할 수 있는 스키마와 API) 그리고 DOM 호환 사용자 에이전트에 필요한 각 권고안의 핵심 컴포넌트를 수립하는데 도움이 되었다. 즉, 모든 스펙을 분리된 옵션 모듈로 발표하였다. DOM 2 : 2000년에 발표, DOM 1 릴리즈를 확장한 것으로 1과의 일관성을 유지하도록 설계되었다. 레벨 2에서는 .. history, screen, navigator 객체 history 객체는 말 그대로 브라우저가 로드했던 페이지의 히스토리를 지정한다. 이를 사용해서 이전/다음 페이지 등으로 이동할 수 있다. history의 관계 프로퍼티(next/back)나 메소드(previous/forward)를 사용하면 과거에 로드한 페이지를 살펴볼 수 있다. current로 현재 페이지에 접근할 수 있고, history 길이를 알아낼 수도 있다. 또한 go 메소드에 숫자를 인자로 주어 원하는 페이지로 바로 갈 수도 있다. (음수값을 주면 이전 페이지로 이동한다. / 양수값을 주면 그 숫자만큼 다음 페이지로 이동한다.) 웹페이지 개발자는 history에 대해 그닥 신경 쓰지 않아도 된다. 히스토리는 일반적으로 DHTML / Ajax 같은 인페이지(in-page) 기법을 사용할 때에만.. iframe을 사용한 원격 스크립트 Ajax는 페이지 내에서 클라이언트 - 서버 간 인터랙션을 가능하게 해줌으로써 빠르게 인기를 얻었다. 여기서 인터랙션은 페이지를 다시 읽어오지 않아도 데이터를 서버로 전송하거나, 서버에서 전송받은 데이터로 페이지 내용을 업데이트 하는 것을 말한다. Ajax 이전에도 원격 서버 기능을 구현할 수 있는 방법은 있었다. 그 중 유명한 방법이 iframe 이라는 HTML 태그와 원격 스크립트 개념을 사용한 방법이다. * 참고 ; 원격 스크립트에 iframe을 사용한 개념은 애플 개발자 네트워크 문서에서 에릭 코스텔로에가 처음 소개했다. http://developer.apple.com/internet/webcontent/iframe.html iframe은 일반 프레임과 달리 페이지 내에 삽입한다. 가로/세로 길이.. location 객체 location 객체의 프로퍼티는 전부 페이지의 로케이션과 관련되어 있다. [표] 프로퍼티 용도 hash http://some.com/somepage#somehash (해시마크(#) 뒤에 오는 문자열) host URL의 호스트명 + 포트번호 hostname 호스트명(도메인명) href URL 전체 pathname 도메인명 다음에 오는 경로명 port 포트 번호 protocol 프로토콜(HTTP 등) search 질의 문자열(?) 뒤에 오는 문자열 target URL target 명 예) http://learningjvascript.info/ch09-01.htm?a=1 host/hostname: learningjavascript.info protocol: http search: a=1 href: http.. 이벤트 버블링 실습 이전 1 2 3 4 다음
