Node 인터페이스의 주요 속성

Node parentNode : 현재 노드의 부모 노드를 저장
NodeList childNodes : 현재 노드의 자식 노드들을 배열로 저장
Node firstChild : 현재 노드의 가장 첫번째 자식 노드를 저장
Node lastChild :
Node previousSibling : 현재 노드의 이전 형제 노드를 저장
Node nextSibling : 현재 노드의 다음 형제 노드를 저장
DOMString nodeName : 노드의 이름
DOMString nodeValue : 노드의 값

Node 인터페이스의 주요 메소드

Node insertBefore(newChild, refChild) --> 사용법: 부모노드.insertBefore(새자식노드, 기존자식노드);
Node replaceChild(newChild, oldChild)
Node removeChild(oldChild)
Node appendChild(newChild)
boolean hasChildNodes()

document object methods (DOM을 구현한 주요 메소드)

addEventListener(eventType, listener, useCapture)
 -Not supported in IE, which uses attachEvent() instead.

attachEvent(eventType, function)
 -IE 5+only function

createAttribute("attributename")
 var styleattr=document.createAttribute("align");
 styleattr.nodeValue="center";
 document.getElementById("sister").setAttributeNode(styleattr);

createComment(commenttext)
 var commentnode=document.createComment("Copyright JavaScript Kit")
 document.getElementById("mydiv").appendChild(commentnode)

createElement(tagName)
 var textblock=document.createElement("p")
 textblock.setAttribute("id", "george")
 textblock.setAttribute("align", "center")
 document.body.appendChild(textblock)

createTextNode(text)
 var headertext=document.createTextNode("Welcome to JavaScript Kit")
 document.getElementById("mytitle").appendChild(headertext)

getElementById(id)

getElementsByName(name)
 <div name="george">f</div>
 <div name="george">f</div>
 <script type="text/javascript">
 var georges=document.getElementsByName("george")
 for (i=0; i< georges.length; i++)
 // do something with each DIV tag with name="george". Firefox only.
 </script>

 getElementsByTagName(tagname)
 var ptags=document.getElementsByTagName("p")
 var alltags=document.getElementsByTagName("*") //returns all elements on page



 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> DOM 노드의 생성, 추가, 제거, 속성설정 </TITLE>
  <style type="text/css">
 div.classA { font-size:20pt; }
 div.classB { font-size:30pt; }
  </style>
  <script>
  var num=0;
  function create(){ /* 노드의 생성, 추가, 속성설정 */
    divNode = document.createElement("div");
    divNode.setAttribute("id", "div"+(++num));
    var textNode = document.createTextNode("This is TextNode");
    divNode.appendChild(textNode);
    document.body.appendChild(divNode);
  }

  function remove(){ /* 노드를 제거할 때는 부모노드에서 removeChild()를 이용한다 */
    var node = document.getElementById("div"+(num--))
    document.body.removeChild(node); /*body태그의 바로 아래에 있는 자식 엘리먼트를 제거할 때*/
  }
  function styleChange(){/* 태그에 설정된 Style속성을 변경하려면.... */
    document.getElementById("sample").style.backgroundColor="blue";
  }
  function attribute(){ /* 태그에 설정된 일반속성의 값을 변경하려면 다음 2가지 방법 중 하나를 사용한다*/
    //document.getElementById("sample").align="left";
    document.getElementById("sample").setAttribute("align", "right");
    /* 속성의 제거는 removeAttribute(속성이름)을 사용한다 */
  }
  function styleClassChange(){ /* 태그에 적용된 스타일 클래스를 변경할 때는 className속성을 이용한다 */
    //document.getElementById("sample").className="classA";
    document.getElementById("sample").setAttribute("className", "classB");
  }
  function setEventHandler(){
 document.getElementById("sample").onmouseover=function(){ alert('Hello'); }
  }
  </script>
 </HEAD>

 <BODY>
  <div id="outer">
  <!--문제: 다음 div 노드(id가 sample인 노드)를 제거하려면 어떻게 해야 할까요? -->
   <div id="sample" align="center" style="background-color:red">
       Sample DIV Element
   </div>
   <div id="btGroup" align="center">
  <input type="button" value="Create Element" onClick="create()"><br>
  <input type="button" value="Remove Element" onClick="remove()"><br>
  <input type="button" value="Style Change" onClick="styleChange()"><br>
  <input type="button" value="Att Change" onClick="attribute()"><br>
  <input type="button" value="Style class Change" onClick="styleClassChange()"><br>
  <input type="button" value="Set EventHandler" onClick="setEventHandler()"><br>
   </div>
  </div>
 </BODY>
</HTML>

+ Recent posts