가카리의 공부방

23. jQuery Node 변경 API jQuery를 이용해서 노드를 제어하는 방법을 알아보자. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. http://api.jquery.com/category/manipulation/ 1) 추가 추가와 관련된 주요한 메소드는 4가지다. 각각의 관계를 그림으로 나타내면 아래와 같다. 아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예이다. (실행) content1 //타겟 전 //타겟 바로 이전 content2 //타겟 바로 이후 //타겟 후 $('.target').before('before');//타겟의 이전에 들어감 $('.target').after('after');//타겟의 다음에 들어감 $('.target..

22. Node 변경 API 1) 노드 추가 노드의 추가와 관련된 API들은 아래와 같다. appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가 insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다. 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다. document.createElement(tagname) 엘리먼트 노드를 추가한다. document.createTextNode(data) 텍스트 노드를 추가한다. HTML CSS function callAppe..

21. Node 종류 API 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.) 1) Node Type 노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log(name, Node[name]); } 결과 ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 EN..

20. Node 관계 API Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티 들이다. Node.childNodes 자식노드들을 유사배열에 담아서 리턴 한다 Node.firstChild 첫번째 자식노드 Node.lastChild 마지막 자식노드 Node.nextSibling 다음 형제 노드 Node.previousSibling 이전 형제 노드 아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM var s = document.getElementById('start'); console.log(1, s.firstChild); // #text body와 ul..

19. Node 객체 소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주요기능 Node 객체의 주요한 임무는 아래와 같다.관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 1) 노드의 종류 Node 객체는 모든 구성요소를 대표하..

18. jQuery 조회 범위 제한 이전 수업에서 Element 객체에서 getElementsBy* 메소드를 실행하면 조회의 범위가 그 객체의 하위 엘리먼트로 제한된다는 것을 알아봤다. jQuery에서는 어떻게 이러한 작업을 할 수 있을까? 1) selector context 가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다. 그 제한된 범위를 jQuery에서는 selector context라고 한다. html css JavaScript JavaScript Core DOM BOM $( ".marked", "#active").css( "background-color", "red" ); 실행결과 html css JavaScript JavaScript Core DOM BOM 선택자를 아래처럼 작성해도..

17. jQuery 속성 제어 API 지금까지 살펴본 Element의 API에 해당하는 기능을 jQuery에서는 어떻게 구사하는가를 알아보자. 1) 속성 제어 jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있다. opentutorials var t = $('#target'); console.log(t.attr('href')); //http://opentutorials.org t.attr('title', 'opentutorials.org'); // title 속성의 값을 설정한다. t.removeAttr('title'); // title 속성을 제거한다. 2) at..

16. 속성 API 속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 이 속성을 어떻게 제어하는가 알아보자. 속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다. Element.getAttribute(name) Element.setAttribute(name, value) Element.hasAttribute(name); Element.removeAttribute(name); opentutorials var t = document.getElementById('target'); console.log(t.getAttribute('href')); //http://opentutorials.org t.setAttribute('title', 'op..

15. 조회 API 조회 API는 엘리먼트를 조회하는 기능이다. 조회 방법에 대해서는 이미 여러차례 살펴봤기 때문에 이번 시간에 알아볼 내용은 조회 대상을 제한하는 방법에 대한 것이다. 지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. html css JavaScript JavaScript Core DOM BOM var list = document.getEl..

14. 식별자 API 엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. 본 수업에서는 식별자 API들에 대해서 알아보자. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다. 1) Element.TagName 해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다.(a태그, ul태그 등) html css JavaScript console.log(document.getElementById('active').tagName) 2) Element.Id 문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id의 값을 읽고 변경하는 방법을 보여준다. html css JavaScr..