그림 : http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

Element객체와 jQuery

document.getElementById : return type은 HTMLLIELement
document.getElementsByTagName : return type은 HTMLCollection (유사배열)
-> 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection return
constructor 혹은 constructor.name 로 확인 가능

var li = document.getElementsByTagName('li');
var li2 = $(li);
위와같이 jQuery function 인 $(); 로 둘러싸면, return type이 jQuery 가 되지만,
복수일 경우 유사배열로 잡히며, li2[0], li2[1]... 각각은 HTMLLIELement 타입이 된다.
-> l1.constructor.name, li2.constructor.name, li2[0].constructor.name  로 확인 가능

document.getElementById('target').getAttribute(name);
==> ==> $('#target').attr(name);
document.getElementById('target').setAttribute(name, value) ;
==> $('#target').attr(name, value);

document.getElementById('target').hasAttribute(name);

document.getElementById('target').removeAttribute(name);
==> $('#target').removeattr(name);

Node 객체

Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild : 첫번째 자식노드
Node.lastChild : 마지막 자식노드
Node.nextSibling : 다음 형제 노드
Node.previousSibling : 이전 형제 노드

** Node 와 Node.nextSibling.previousSibling는 같다.  (이런 식으로 Chaining 식으로 사용 가능)

Node.nodeType node의 타입을 의미한다.
Node.nodeName node의 이름 (태그명을 의미한다.)

** 2015_08_28 추가!

querySelector() 이용 시, 태그의 class 속성 접근 시 매우 편리

this.calls.querySelector('.handled-call.incoming .additionalContactInfo');
위와 같은 방식으로 calls라는 변수(어느 태그값을 가져온 변수 document.getElementById 등 이용) 하위에
태그들 중 handled-call.incoming 클래스를 가진 녀석의 하위에 있는 녀석들 중 additionalContactInfo 클래스를 가진 녀석이 리턴된다.

attribute(HTML의 속성) VS property(JavaScript의 속성)

$().attr(jQuery를 통해 attribute 제어) VS $().prop(jQuery를 통해 property 제어)
=> setAttribute(), getAttribute == $().attr
   removeAttribute() == $().removeAttr

* property 방식을 사용하는 것이 더 속도가 빠르다고 한다.
* 그렇다면, property를 사용하는 것이 더 장점이 있다는 뜻인데..

  하지만, attr에서 사용하는 이름과 약간 다른 부분이 있는 문제가 있다.

  이를 jQuery에서는 교정해주는 아주 훌륭한 기능이 있다.
  즉, 아래 둘다 같은 결과를 리턴하게 된다.
  $('#t1').prop('className', 'important'); // className는 property 방식
  $('#t1').prop('class', 'important');     // class는 attribute 방식

DOM Tree는 아래와 같다.

그림 : http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

ex) HTMLLIElement : http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-74680021

* jQuery를 이용하면, 이러한 관계를 잘 몰라도 JavaScript 코딩이 수월하다.

즉, document.getElementById('ironmask').tagName 는 HTMLLIElement라는 객체를 반환합니다.
위 상수를 $()로 둘러싸게 되면, Jquery 타입을 갖게 됩니다.
아래처럼 대입해놓고, constructor 속성을 찍어보면 확연히 확인 가능합니다.

var sample = document.getElementById('ironmask').tagName
var j_sample = $(document.getElementById('ironmask').tagName)
console.log(sample.constructor)

jQuery는 JavaScript에서 사용되는 편리하고 강력한 라이브러리 입니다.

자세한 내용은 아래 링크를 참고 하시면 됩니다. :)
-> http://jquery.com

* jQuery의 API 참고
-> https://api.jquery.com

jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있고,
jQuery는 객체를 조회할 때 CSS 선택자를 이용합니다.

jQuery 라이브러리 사용 (jQuery’s CDN)
--> html 코드에 아래 코드를 추가하면 된다. :)
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

jQuery의 기본 Syntax
$('CSS의 선택자').css('color', 'pink');

$('li').css('color', 'pink');
====================================================================================

 $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.
====================================================================================

* jQuery에서 attr과 prop의 차이!!
-> attr은 html의 attribute 실제 값을 리턴, prop는 그에 매칭되는 JavaScript의 property값을 리턴

DOM과 jQuery의 비교 Sample
아래의 코드는 동일한 결과를 가져오는데,  jQuery가 훨씬 편리한 것을 알 수 있다.

1. DOM을 사용한 경우

            var lis = document.getElementsByTagName('li');
            for(var i=0; i<lis.length; i++){
                lis[i].style.color='pink';   
            }

2. jQuery를 사용한 경우 (jQuery에서는 아래 한 라인으로 암시적 반복이 수행된다.)

            $('li').css('color', 'pink')

jQuery의 Chaining 문법
아래의 Chaining 문법을 통해 여러가지의 css 설정 적용이 한 Line 에서 가능하다. (멋짐..)

         $('#active').css('color', 'red').css('textDecoration', 'underline');
/* active 라는 id를 가진 요소에 red와 underline을 적용 */

jQuery의 조회 범위 제한 문법
아래와 같이 여러가지 방법을 통해 범위 제한 및 CSS 적용이 Chaining가 가능하다.

/* Javascript Sample */
console.info("hello world");

Sublime Text2 라는 Tool은 FFOS 프로젝트를 위한 HTML5 스터디를 위해 알게되었습니다.

이클립스 자동완성 기능의 맞을 알게된 저는 이 툴이 매우 편리하게 다가왔죠 ㅎㅎ

그리고 개인이 무료로 사용할 수 있는 훌륭한 Tool 입니다.

각설하고, 아래 간단한 사용법과 팁을 알려드립니다.

1. Tool 다운 Site : http://www.sublimetext.com/

2. Package control (for Plug in) Site : https://packagecontrol.io/
==> Emmet 플러그인 추천  
** 공식 사이트
http://docs.emmet.io/
https://github.com/sergeche/emmet-sublime

ex) html 파일 인 경우!
html:5 + Tab키
body>div + Tab키 , ul>li*20{item $} + Tab키, table>tr*10>td*5 + Tab키,
a[href="http://ironmask84.net"]>{ironmask's life} + Tab키, .title + Tab키 (div태그의 class로 자동 생성)

3. Sublime 많은 팁 Site (유용한 Plug 포함) : https://opentutorials.org/course/671/3595

제가 추천 드리는 기본적인 단축키
1. html:5 입력후 Tab키 누르면 기본적 html5 양식 출력

2. Ctrl + / : 한줄 주석달기 (html, script, css등 다 됩니다)

3. Ctrl + Shift + / : 요소별로 선택한 요소 전체 주석

4. Alt + Shift + 2, 3, 4 : 화면 영역 분할하기  (Ctrl + 1, 2, 3, 4 로 영역 포커싱 가능)

5. Ctrl + D : 현재 선택한 단어와 동일한 단어를 연속으로 선택 가능

아래는 타 블로그의 유익한 내용을 담아봤습니다. ^^

html 코딩 중에 브라우저로 바로 열기를 추가해 보겠습니다. 해당 기능은 플러그인으로 설치하는게 아니라 직접 코드를 만들어서 플러그인을 제작한 뒤에 단축키를 지정해줘야 합니다. 에디트플러스 쓰시는 분들은 Ctrl + B로 브라우저보기 할 수 있죠. 드림위버에는 F12가 있구요.

일단 메뉴의 Tools -> New Plugin을 누릅니다. 이상한 샘플 명령어들이 있는 파일 하나가 열립니다. 그곳에 아래 내용으로 덮어 씌우기를 합니다. 그리고 저장해 준뒤 파일을 닫습니다.

import sublime, sublime_plugin

import webbrowser

class OpenBrowserCommand(sublime_plugin.TextCommand):

    def run(self,edit): 

        url = self.view.file_name()

        webbrowser.open_new(url)

[출처] Sublime Text2 유용한 플러그인과 단축키 배우기|작성자 이야기꾼

그런 뒤에 단축키를 지정해보죠. 단축키 지정은 Preference -> Key Bindings – User입니다. 지난 포스트에서 폰트 옵션을 지정한 것처럼 제가 지정한 단축키를 따로 저장하는 파일입니다. 파일이 열리면 아래의 코드를 복사해서 붙여넣어줍니다.

{ "keys": ["ctrl+b"], "command": "open_browser" }

[출처] Sublime Text2 유용한 플러그인과 단축키 배우기|작성자 이야기꾼

저장한 뒤 파일을 닫아준뒤 html 파일 작업중에 Ctrl + B를 누르면 기본 브라우저로 html 파일이 열립니다. 그럼 말이 나온 김에 단축키에 대해 알아보겠습니다. 가장 많이 사용하는 단축키는 아래와 같습니다.

• Shift + Del(Backspace) : 현재 커서가 있는 줄 완전 삭제
• Ctrl + Del(Backspace) : 단어 단위로 삭제하기
• Ctrl + Shift + D : 현재 커서가 있는 줄 아래로 현재 줄 복사
• Ctrl + Shift + [, ]  : 태그 닫기와 열기
• F11 : 전체화면모드

기본 강의 사이트
--> https://opentutorials.org/module/904/6619

sublimeText 사이트
--> http://www.sublimetext.com/

sublimeText Package 사이트
--> https://packagecontrol.io/

웹프로그래밍 전문 블로그
--> http://webdir.tistory.com/319