FEDev Story

텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 값을 가져오는 두개의 API를 알아본다.nodeValuedata html css JavaScript

소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world 실행결과: Hello world TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"} Hello world 주요기능값텍스트 노드의 값을 가져오는 APIdatanodeValue조작appendData()deleteData()insertData()replaceData()subStringData()생성docuemnt.createTextNode()

소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 주요 API노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.createElement()createTextNode()문서 정보 APItitleURLreferrerlastModified

innerHTMLinnerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTMLouterHTML은 선택한 엘리먼트를 포함해서 처리된다. innerText, outerTextinnerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. insertAdjacentHTML()좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다. target.insertAdjacentHTML('beforebegin', '...'); beforebegin은 target 노드의 앞에 두번째 인자인 H1 노드 객체를 삽입한다..

출처 : 생활코딩 (https://opentutorials.org/course/1375/6701) 노드 추가노드의 추가와 관련된 API들은 아래와 같다.appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.document.createElement(tagname) 엘리먼트 노드를 추가한다.document.createTextNode(data) 텍스트 노드를 추가..

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.)nodeType노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. 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 ENTITY_NODE 6 PROCESS..

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.Node.childNodes 자식노드들을 유사배열에 담아서 리턴한다.Node.firstChild 첫번째 자식노드Node.lastChild 마지막 자식노드Node.nextSibling 다음 형제 노드Node.previousSibling 이전 형제 노드아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM

소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주로 사용하는 노드 객체는 다음과 같다. 문서 노드(Document) - 전체 문서를 가리키는 Document 객체 요소 노드(Element) - HTML 요소를 가리키는 객체 텍스트 노드(CharacterData) - 텍스트를 가리키는 객체 주요기능 Node 객체의 주요한 임무는 아래와 같다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.parentNode - 이 노드의 부모 노..

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.Element.getAttribute(name)Element.setAttribute(name, value)Element.hasAttribute(name);Element.removeAttribute(name); opentutorials 속성과 프로퍼티모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. Hello world setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속..

조회 API는 엘리먼트를 조회하는 기능이다. 지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. textContent는 엘리먼트 객체의 텍스트 컨텐츠를 담고 있는 프로퍼티다. html css JavaScript JavaScript Core DOM BOM var list = document.getElementsByClassName('marked'); consol..

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.Element.tagName해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다. document.getElementById('active').tagName Element.id문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id의 값을 읽고 변경하는 방법을 보여준다. var active = document.getElementById('active'); console.log(active.id); active.id = 'deactive'; console.log(act..

소개Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.다른 객체들과의 관계DOM의 계층구조에서 Element 객체의 위치는 아래와 같다.주요기능식별자문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 APIEle..

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. HTMLCollection HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자. HTML CSS JavaScript 결과

출처 : 생활코딩 (https://opentutorials.org/course/1375/6665)HTMLElementgetElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 아래 코드는 getElement*의 리턴 값을 보여준다. HTML CSS JavaScript 실행결과: HTMLLIElement HTMLCollection 이것을 통해서 알 수 있는 것은 아래와 같다. document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTM..

프로토타입 오염모든 객체는 그 prototype 객체의 프로퍼티들을 상속하고 for...in 반복문은 객체의 상속된 프로퍼티 또한 자신이 '소유한' 프로퍼티로 열거한다. 다음 코드와 같이 요소를 객체 자신의 프로퍼티로 저장하는 사용자 정의 생성자와 Array 타입을 사용하여 객체를 생성하게 되면 프로토타입을 오염시킬 수 있다. function NaiveDict() { } NaiveDict.prototype.count = function() { var i = 0; for (var name in this) { // counts every property i++; } return i; }; NaiveDict.prototype.toString = function() { return "[object NaiveDi..

자바스크립트 제대로 공부하는 방법※ 이 글은 How to Become a Great JavaScript Developer의 번역판입니다.저는 커가면서 점차 관심 분야가 다양해지고, 겉으로 보기에는 무관한 영역까지 넓어져 갔습니다. 저는 수학을 역사 만큼 좋아했었죠. 저의 목표는 여러 분야에 능통한 르네상스 맨(박식가)이 되는 것이었습니다. 그것은 아주 힘든 일 이란 것을 알게 되었고, 갑자기 저는 여러 분야를 알지만 한 분야에도 능통하지 못한 사람이 되는 위험성과 마주했습니다.저는 르네상스 시대의 사람들처럼 될 순 없더라도 적어도 한 분야 만이라도 마스터한 사람이 되기 위해, 확실하게 어떤 분야를 전문적으로 해야겠다고 생각했습니다. 어떻게 하면 소프트웨어 개발에 필요한 어마어마한 양의 지식을 유지하면서 ..

참고문서 : Beautiful Javascript 다음 조건문은 프로퍼티가 존재하는지 확인한다. 만약 존재하지 않으면 메서드를 호출한다. if ( !this.username ) { this.setUsername(); } username이 없으면 username 을 설정한다. 그러나 논리 연산자 OR을 사용하면 더욱 간결한 방법으로 같은 것을 표현할 수 있다. this.username || this.setUsername() username이 존재하지 않으면 username을 설정한다는 표현식이다. 다음은 username에 대한 배열을 살펴보자. username이 없으면 배열에 username을 추가하고자 한다. if ( users.indexOf(this.username) == -1){ users.push(..

출처 : A fresh look at JavaScript Mixins 믹스인이란 프로토타입을 바꾸지 않고 한 객체의 프로퍼티를 다른 객체에게 ‘복사’해서 사용하는 방식이다. 이 믹스인 패턴은 어디에 쓰일 수 있을까? 이 패턴은 기존에 있던 객체의 기능을 그대로 가져가면서 다른 객체에 추가할 때 주로 사용된다. 예를 들어 이벤트를 지원할 때는 상속보다는 믹스인이 더 어울린다. 아래는 믹스인과 관련된 유용한 정보를 담고 있다. https://vnthf.github.io/blog/mixin/ 아래는 원형, 타원, 네모 버튼을 생성하는 사례를 구현하고자 기능과 동작을 정의하는 전통적인 믹스인 오브젝트를 프로토타입 방식으로 정의하였다. var Circle = function() {}; Circle.prototyp..

웹사이트 제작시 많이 사용되는 webfont는 시스템 폰트보다 훨씬 큰 용량을 차지한다. 그런 이유로 웹폰트 제작업체는 webfont의 로딩후 콜백함수를 호출하는 등 작업에 필요한 API를 제공하는게 보통이다. 하지만 API를 제공하지 않는다면? 페이지를 정상적으로 렌더링하려면 이미지, css, 자바스크립트 등 많은 resource 파일들이 정상적으로 먼저 로딩되어야 한다. 하지만 큰용량을 차지하는 webfont의 로딩을 관리하는 API가 제공되지 않는다면 생각지 못한 오류를 만날 수 있다. fontfaceonload.js fontfaceonload.js (github.com/zachleat/fontfaceonload) 플러그인은 webfont가 정상적으로 로딩되었는지 실패하였는 지에 따라 콜백함수를 실..

자기 실행 익명 함수 (function(){ var private_var = "private"; })(); //변수 private_var이 선언되지 않았다는 에러가 출력된다. console.log(private_var); 위의 함수는 함수명을 지정하거나 함수를 변수에 저장하지도 않고 함수를 바로 실행하기 때문에 자기 실행 익명 함수라고 한다. 자기 실행 익명 함수는 변수 스코프를 제어하는 데 사용하며, 변수가 코드 외부로 노출되지 않게 해준다. 이런 이유로 자바스크립트 플러그인 개발할 때 유용하게 활용할 수 있다. 변수 덮어쓰기를 차단해야 하는 사례로 흔히 제이쿼리와 프로토타입 자바스크립트 라이브러리를 모두 사용하는 경우 두 라이브러리 모두 단일 문자 변수 $를 폭넓게 활용하고 있다. 다음 코드처럼 $ ..

자바스크립트 객체는 프로토타입기반이다. 하지만 new 연산자를 사용하여 클래스 기반으로 객체를 만들 수 있다. 클래스 방식의 객체 만들기 //1단계 : 프로토타입 객체 정의 var proto = { sentence : 4, probation: 2 }; //2단계 : 객체 생성자 정의 var Prisoner = function(name, id){ this.name = name; this.id = id; }; //3단계 : 생성자와 프로토타입 객체 연결 Prisoner.prototype = proto; //4단계 : 객체생성 var firstPrisoner = new Prisoner('Joe', '12A'); var secondPrisoner = new Prisoner('Sam', '2BC'); new연산자..

출처 : http://jsonobject.tistory.com/209 HTML에서 JavaScript 파일 실행하기 HTML 문서에서 독립된 파일의 JavaScript 소스 코드를 실행하기 위해서는 head 또는 body 엘러먼트의 자식 엘러먼트로 아래와 같이 script 엘러먼트를 작성하는 방법이 일반적으로 많이 쓰인다. jQuery를 이용하여 JavaScript 파일을 동적으로 실행해보자 그렇다면 HTML이 아닌 JavaScript 레벨에서 외부의 JavaScript 소스 코드를 실행하는 것이 가능할까? 가능하다. 단순히 script 엘러먼트를 생성하고 src 애튜리뷰트를 부여 후 DOM에 추가하면 된다. jQuery를 사용하면 아래와 같이 한 줄의 명령으로 실행할 수 있다. // Velocity.j..

출처 : http://jsonobject.tistory.com/39 내부 프로젝트에서 코드와 같은 룩업 데이터를 선택하는 화면은 팝업 윈도우로 호출하려는 생각에 팝업 윈도우에서 유저가 선택한 값을 부모 윈도우로 반환하는 방법을 테스트하고 정리하였다. 부모 윈도우에서는 아래와 같이 작성한다. function openNewWindow(url) { var name = '_blank'; var specs = 'menubar=no,status=no,toolbar=no,width=500,height=200'; var newWindow = window.open(url, name, specs); newWindow.focus(); } function getReturnValue(returnValue) { var div =..

출처 : http://ismydream.tistory.com/98event.stopPropagation() event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다.사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그..

//새로 고침 방지 기능 실행 function LockF5(){ if (event.keyCode == 116) { event.keyCode = 0; return false; } } document.onkeydown = LockF5; IE8에서 작동하도록 하려면 아래 방법을 사용한다. document.onkeydown=function(e) { var event = window.event || e; if (event.keyCode == 116) { event.keyCode = 0; alert("This action is not allowed"); return false; } }

다음은 단축메서드로 $ 함수를 정의하며 이벤트 위임을 사용해서 클릭이벤트가 발생한 'A'태그의 기본동작을 막고 href에서 특정값을 추출하기 위한 구문이다. Gravedigger Save Me var $ = function(id){ return document.getElementById(id); }; $('vids').onclick = function(e){ var src, id; e = e || window.event; src = e.target || e.srcElement; if(src.nodeName !== 'A'){ return; } if(typeof e.preventDefault === 'function'){ e.preventDefault(); } e.returnValue = false; id ..

DOM 업데이트시 브라우저는 화면을 다시 그리고(repaint), 엘리먼트를 재구조화(reflow)하는데, 이 또한 비용이 많이 드는 작업이다. 원칙적으로 DOM 업데이트를 최소화하는 게 좋다. 문서 조각을 생성해 외부에서 수정한 후, 처리가 완전히 끝난 다음에 실제 DOM에 추가하는 방법이 있다. var p, t, frag; frag = document.createDocumentFragment(); p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); frag.appendChild(p); p = document.createElement('p'); t = document.create..

분리와 점진적 개선을 고려한 이벤트 처리. 자주 사용하는 이벤트 유틸리티는 퍼사드 메서드로 만든다. Click me: 0 var myevent = { 'stop' : function(e){ //퍼사드메서드 // 이벤트 객체를 가져온다. e = e || window.event; // IE 이외의 모든 브라우저 // 기본동작이 수행되지 않게 한다. if(typeof e.preventDefault === 'function'){ e.preventDefault(); } // 이벤트가 상위 노드로 전파되지 않게 한다. if(typeof e.stopPropagation === 'function'){ e.stopPropagation(); } // IE // 기본동작이 수행되지 않게 한다. if(typeof e.retu..

DOM을 깨우치다 (가치에 대한 완전한 이해)코디 린들리 저 안재우 역 비제이퍼블릭 2013.11.22.7.5 네티즌리뷰[3건] 20,000원 → 18,000원(-10%)소개 『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사용하여 DOM 스크립트에서 JQUERY가 수행하고 있는 역할을 이해하고 오버헤드를 줄여하 하는 모바일 장치 등... 1장. 노드 개요 1.2 노드 개체 유형 모든 노드 유형과 그 값을 출력 1.3 Node 개체로부터 상속받은 하위 노드 개체 1.5 노드의 유형과 이름 식별하기 http://jsfiddle.net/domenlightenment/8E..