이책은 일단 쉽고,빠르게 읽을수 있고,유용하며 재미있다.
조금이라도 javascript을 알고있다면 너무 쉽게 읽을수 있다.
물론 위의글은 모두 정답이다.당연하고 기초적이긴 하지만 지키기에는 많은 노력이 뒤받침이되야한다.지금껏 해왔던 습관들을 버려야하고 기타 개발여건도 받쳐줘야하고..
내생각은 처음부터 하면 좋지만 여건이 안되면 나중에라도 서버단만 리팩토링을 하는것이 아니라 프론트도 리팩토링을 하면서 바꾸면 될것 같다.
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의 값을 반환한다.
-(element.)setAttribute(att):해당 element의 attribute의 값을 저장한다.
-(element.)childNodes:해당 element의 자식 elements을 배열로 반환.
-(node.)nodeType:1)번 참고.
-(node.)nodeValue:해당 node의 text반환.
-(node.)firstChild:해당 node의 첫번째 node 반환.
-(node.)lastChild:해당 node의 마지막 node 반환.
-(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을 반환한다.
-(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을 확인해야된다.
