Dev. Language/Javascript (26) 썸네일형 리스트형 사용자 정의 객체 예제 2 객체 인스턴스를 생성한 다음 객체 프로토타입에 프로퍼티와 메소드를 추가하는 방법. 예제) Tune 객체를 변경하여 이를 구현한다. function Tune(title) { this.title = title; } function printTitle() { alert(this.title); } var someTune = new Tune("Title"); Tune.prototype.print = printTitle; var anotherTune = new Tune("Another Title"); anotherTune.print(); 자바스크립트 엔진이 새로운 객체에 프로토타입을 생성하기 위해서는 객체가 최소한 한 번은 인스턴스화 되어야 한다. 사용자 정의 객체 예제 예제) Tune 객체를 생성한다. (이 객체는 노래 제목을 인자로 받아 title이라는 프로퍼티에 배정하고 가수를 저장하는 배열과 이에 대한 연산을 수행하는 두 가지 메소드를 갖는다.) var Tune = function(title) { // 생성자 함수 this.title = title; var performedBy = new Array(); this.addPerformer = function(performer) { var i = performedBy.length; performedBy[i] = performer; } this.listPerformers = function() { var singers = ""; for(var i=0; i 자바스크립트 객체와 프로토타입 자바스크립트 객체는 일반적으로 하나의 생성자와 여러 개의 메소드/프로퍼티로 구성된다. 또한 Object라는 자바스크립트 표준 객체로부터 여러 가지 기능을 상속받는다. 메소드들은 객체 내의 메소드로 사용되기 보다는 점차 전역 함수로 사용되게 되었다. 예) eval Object는 새로운 객체를 생성할 때 프레임워크를 제공한다. 그러나 기존 객체지향 언어에서 제공하는 상속과 클래스의 개념을 통해서 하는 대신 프로토타입이라는 개념을 통해 객체지향과 유사한 기능을 제공한다. + 프로토타입 자바나 C++에서는 기존의 클래스를 확장하여 새로운 클래스를 만들면 기존 클래스로부터 상속을 받는다. 그리고 나서 상속받은 기능을 재정의하거나 고유의 기능을 추가하는 수순을 밟는다. 반면, 자바스크립트에서는 Object 생성자를.. 트리 변경 document는 모든 페이지 엘리먼트의 소유자이다 부모이다. 이 때문에 새로운 엘리먼트의 인스턴스를 생성하는 대부분의 팩토리 메소드는 코어 document 객체의 메소드이다. 그렇지만 Node는 코어 API 내에 네비게이션을 유지하고 있다. 이로써 document 트리의 계층적 구조를 지원해주는 것이다. 각 node는 다른 노드와 부모-자식, 형제-형제 관계를 맺고 있다. Element는 중첩 엘리먼트에 변경 사항을 적용할 수 있도록 컨텍스트 내의 엘리먼트에 접근하는 방법을 제공한다. [표] 팩토리 메소드 및 코어 객체 타입 메소드 생성된 객체 설명 createElement(tagname) Element 특정 태그에 해당하는 엘리먼트 생성 createDocumentFragment DocumentFrag.. 컨텍스트 내에서 엘리먼트 접근하기 Element는 DOM 코어에서 중요한 요소다. 문서 내의 모든 객체는 Element의 기본 기능과 프로퍼티를 상속받는다. 이들 대부분은 속성을 알아내고 설정하는 것이거나 속성 존재 여부를 알아내는 것들이다. getAttribute(name) setAttribute(name, value) removeAttribute(name) getAttributeNode(name) setAttributeNode(attr) removeAttributeNode(attr) hasAttribute(name) 그 외의 것도 있으나 대부분 네임스페이스와 관련 있다. 속성이 항상 프로퍼티인 것은 아니다. 속성은 엘리먼트에 따라 다르다. 예를 들어, 일부 엘리먼트는 width, align과 같은 속성을 가지고 있는 반면 일부는 그렇.. Node 트리 탐색 문서 내용의 탐색에 Node를 사용할 수 있으며, 이 때 다양한 부모, 자식, 형제 메소드를 사용한다. main.html docin.html header khklfhjhdjhfdtsjdyfklgljfjhgdfgcvjnhgcjgfjhg Second paragraph with image following. docout.html 위 예제는 아주 간단한 트리 탐색을 수행한다. 각 레벨에서 데이터를 배열에 저장한 후 출력하고 차례대로 트리를 탐색하면서 각 형제 엘리먼트로 이동하기 전에 부모-자식의 흔적을 출력한다. 참고 ; 문서 트리 탐색에 있어 더 좋은 방법은 레벨 2 탐색 및 범위 스펙을 사용하는 것이다. http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-.. 노드의 프로퍼티와 메소드 문서 트리 내의 각 노드는 종류와 상관없이 여타 노드와 한 가지 공통점을 지닌다. 이 공통점은 바로 Node 객체 프로퍼티와 메소의 기본 집합을 갖는다는 것이다. Node 객체의 프로퍼티는 DOM 컨텐트 트리의 관계를 기록하며, 여기에는 형제, 자식, 부모 엘리먼트가 포함된다. 그리고 또한 노드 정보, 종류, 이름 등의 필요한 정보를 제공하는 프로퍼티도 갖고 있다. Node 객체의 프로퍼티 목록 프로퍼티 용도 nodeName 객체명. 예) Head 엘리먼트에 대한 객체명은 Head nodeValue 엘리먼트가 아닌 경우, 객체의 값 nodeType 노드의 종류, 숫자로 표현한다. parentNode 현재 노드의 부모 노드 childNodes 자식 노드의 NodeList firstChild NodeList.. HTML 객체 접근 페이지 엘리먼트의 DOM HTML 표현에 접근하는 방법은 여러가지다. 첫 번째로 ID를 지정한 후 getElementById 메소드를 사용하는 방법이다. 두 번째로 엘리먼트 간 관계를 사용해 접근하는 방법도 있다. ex) document.forms[0].fields[0]; 세 번째로는 getElementsByName 메소드를 사용 해 엘리먼트 name을 넘겨주는 방법이다. 이 메소드는 동일한 이름의 노드 컬렉션이 들어있는 nodeList를 반환한다. 모든 부라우저에서 이 메소드를 지원하긴 하지만 반환하는 nodeList는 브라우저에 따라 차이가 있다. [예제] option 1 option 2 Example 1 Paragraph 이전 1 2 3 4 다음