가카리의 공부방

30. 이벤트 1) 이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. DOCTYPE html> onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. 2) event target target은 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다. 3) event type 이벤트의 ..

29. 문서의 기하학적 특성 1) 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. body{ padding:0; margin:0; } #target{ width:100px; height:100px; border:50px solid #1065e6; padding:50px; margin:50px; } Coding var t = document.getElementById('target'); console.log(t.getBoundingClientRect()); 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClie..

27. Text 객체 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다. (둘 다 같은 의미임) nodeValue data html css JavaScript var t = document.getElementById('target').firstChild; console.log(t.nodeValue); console.log(t.data); 출처 : https://opentutorials.org/course/1375/6745 28. Text 객체 조작 API 텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작..

26. Text 객체 1) 소개 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world var t1 = document.getElementById('target1').firstChild; var t2 = document.getElementById('target2').firstChild; console.log(t1.firstChild.nodeValue); try{ console.log(t2.firstChild.nodeValue); } catch(e){ console.log(e); } console.log(t2.nextSibling..

25. Document 객체 1) 소개 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. //document 객체는 window 객체의 소속이다. console.log(window.document); //document 객체의 자식으로는 Doctype과 html이 있다. console.log(window.document.childNodes[0]); console.log(window.document.childNodes[1]); 2) 주요 API 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은..

24. 문자열로 노드 제어 노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그런데 이 방식은 복잡하고 장황하다. 좀 더 편리하게 노드를 조작하는 방법을 알아보자. 1) innerHTML innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS function get(){ var target = document.getElementById('target'); alert(target.innerHTML);//HTML소스코드를 바로 보여줌 } function set(){ var target = document.getElementById('target'); target.innerHTML = "JavaS..

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..