그림 : 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 방식

나는 요즘 화두가 되고 있는 삼성물산과 제일모직의 합병에 관심을 많이 가지고 있다..

합병의 거대한 시너지가 목적이 아니라, 삼성그룹의 안정적인 승계를 위해 억지스런 합병을 진행하려한다고 맹비난하는 이들도 적지 않으며 좋지않게 보이기는 나도 마찬가지다.

제일모직의 지분을 많이 가지고 있는 이재용 씨가 삼성물산과 합병을 통해 삼성물산이 가지고 있는 삼성전자 4%등의 지분이 손아귀에 들어오게 되면, 삼성그룹의 왕으로 군림할 수 있다는 취지인 것 같다.

정식으로 재산 상속을 하게되면, 얼마만큼의 세금을 내야 하기에 이토록 많은 소액주주들의 반대에도 불구하고, 거행하려는 것일까..  미국의 대표적 재벌 빌게이츠나 워렌버핏과 비교했을 때 사회에 환원하는 정도가 부끄럽지 아니한가..

ISS 라는 가장 권위있는 국제 자문기관에서도 합병이 부당하다는 공지를 냈음에도,
현재 추세로 봤을 때, 정부 및 공공기관은 대한민국의 막강 대기업 삼성쪽에 손을 들어주는 것 같아 보이며, 이에 따라 언론은 당연히? 일방적인 삼성편을 들고 있어 보인다. 엘리엇이라는 미국의 헤지펀드사가 많은 지분을 가지고 반대편에 나섰으며, 이에 국내의 많은 소액주주들이 위임중에 있다.
다만, 타 외국세력의 움직임이 아직 미지수이다..

몇 일 전에 '수박합병' 이라는 우스광스런 말이 떠돌고 있다..
이것이 무엇이냐 하면, 삼성물산에서 직원들을 풀어서 삼성물산 주식을 한 1000주 이상 쯤 가지고 있는
소액주주들을 대상으로 한 손엔 수박을 들고 한 손엔 위임장을 가지고 가정집 방문하여, 합병찬성을 권유하고 있는 것이다..  이것만 봐도 삼성이 합병을 위해 얼마나 사활을 걸고 있느냐를 알 수 있다...

더욱 놀라운 것은....
오늘 포털사이트 네이버 메인 화면에서 왼쪽 중간쯤에 위치한 배너광고다....

아래에 몇몇의 내용이 있다.
과연 0.35 : 1 의 합병비율과 같은 비율의 주가를 기준으로 합병일에 딱 맞춰질까??

주식매수청구권은 굳이 이번 주주총회에서 반대 의결권을 표명하지 않아도
즉, 기권을 하여도 행사할 수 있다는 언급을 통해 반대표를 저지하고 있어 보인다.

7/17에 있을 주주총회의 결과와 함께 앞으로의 삼성물산 행방이 아주 흥미롭게 다가온다..
삼성이 이번 기회를 통해 사회에도 많은 환원도 하며,
국민들에게 사랑 받는, 국민대표기업이 되는 발걸음의 시작이 되길 바란다.

나 또한 삼성물산의 주주이며,
아직 중립에 있는 처지이지만, 수 많은 소액주주들을 응원합니다.

네이버 메인 배너 

삼성물산 합병관련 내용

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)