Dom Scripting

Dom Scripting

이책은 일단 쉽고,빠르게 읽을수 있고,유용하며 재미있다.
조금이라도 javascript을 알고있다면 너무 쉽게 읽을수 있다.
(시간이 없다면 3~10장까지만 보면됨.)


이책에 내용을 요약하자면.

• Graceful degradation
  (만약에 자바스크립트를 잘 사용하고 있다면 자바스크립트가 없어도 사용자는
  네비게이션을 할수 있다.)
• Unobtrusive JavaScript
  (자바스크립트는 부과적인 기능을 하는것이다.)
• Backwards compatibility
  (뒤떨어진 환경에서도 가능해야한다.)

물론 위의글은 모두 정답이다.당연하고 기초적이긴 하지만 지키기에는 많은 노력이 뒤받침이되야한다.지금껏 해왔던 습관들을 버려야하고 기타 개발여건도 받쳐줘야하고..

내생각은 처음부터 하면 좋지만 여건이 안되면 나중에라도 서버단만 리팩토링을 하는것이 아니라 프론트도 리팩토링을 하면서 바꾸면 될것 같다.
 

1)node.nodeType에는 12가지가 있지만 주로 사용하는것으로는 3가지가 있다.
   1: element node
   2: attribute node
   3: text node
ex)<p title="a gentle reminder">Don’t forget to buy this stuff.</p>
      p->element node
      title->attribute node
      Don’t forget to buy this stuff.->text node

2)Dom scripting
-document.getElementById(id):해당 id의 element을 반환한다.
-document.getElementsByTagName(tag):해당 태그의 element를 배열로 반환한다.
-(element.)getAttribute(att):해당 element의 attribute의 값을 반환한다.^[각주:1]
-(element.)setAttribute(att):해당 element의 attribute의 값을 저장한다.^[각주:2]
-(element.)childNodes:해당 element의 자식 elements을 배열로 반환.
-(node.)nodeType:1)번 참고.
-(node.)nodeValue:해당 node의 text반환.
-(node.)firstChild:해당 node의 첫번째 node 반환.^[각주:3]
-(node.)lastChild:해당 node의 마지막 node 반환.^[각주:4]
-(document.)createElement(nodeName):nodename의 element를 생성한다.
-(document.)createTextNode(text):textnode를 생성한다.
-(parent.)appendChild(child):parentnode에 child를 추가한다.
-(targetElement.)parentNode:targetElement에 parentNode를 반환한다.
-(parent.)appendChild(newElement):parent element뒤에 붙는다.
-(node.)nextSibling:해당node의 다음node을 반환한다.^[각주:5]
-(parentElement.)insertBefore(newElement,targetElement)
  :parent element에 target element전에 new element를 추가한다.
   insertAfter은 없다.하지만 아래의 기타에 있는 함수를 만들어서 사용할수 있다.
-(element.)hasChildNodes:childnode가 있는지 없는지를 boolean으로 반환
-(element.)replaceChild(newChild,oldChild):
   예전 child를 새로운child로 바꾸고 새로운child를 반환한다.
-(element.)removeChild(node):해당 node를 삭제하고 삭제한 node를 반환
-(node.)cloneNode(deep):해당 노드를 복사 deep의 값에는 boolean이 들어가는데
  true일경우 child node까지 복사되며false일경우 child node는 복사안됨.



기타)
1.insertAfter

function insertAfter(newElement,targetElement) {

  var parent = targetElement.parentNode;

  if (parent.lastChild == targetElement) {

     parent.appendChild(newElement);

  } else {

     parent.insertBefore(newElement,targetElement.nextSibling);

  }

}

2.Block level element.

  :예를들어 <blockquote><p>.....</p></blockquote>가 있으면
   var qtuote = document.getElementsByTagName("blockquote");
   qtuote[0].lastChild 라고 하면 p element가 text node가반환된다.
   block level element는 text node를 포함하고 있어서 그렇다.
   이점을 유의해야한다.dom scripting을 할때 이상한점을 발견하면
   반드시 nodeType을 확인해야된다.

 

1. var value = element.attribute=value;
   var value = element.getAttribute(attribute); 같음. [본문으로]
2. element.attribute=value;
   element.setAttribute(attribute)=value; 같음. [본문으로]
3. node.childNodes[0];
   node.firstChild; 같음. [본문으로]
4. node.childNodes[node.childNodes.length-1];
   node.lastChild; 같음. [본문으로]
5. previousSibling은 반대. [본문으로]