-
Javascript DOM Operation Examples개발/JavaScript 2010. 6. 10. 12:21
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 functioncreateAttribute("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()를 이용한다 */
<BODY>
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>
<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>'개발 > JavaScript' 카테고리의 다른 글
javascript 파일 업로드 사이즈 체크 (0) 2010.09.20 자바스크립트 객체(?)처럼 사용하기 (0) 2010.07.28 input box 언어설정, (0) 2010.05.06 브라우져, element 크기 (0) 2010.04.16 scrollHeight / clientHeight / scrollTop (0) 2010.04.16