자바스크립트 DOM Script
– HTML 또는 XHTML 문서에서 모든 엘리먼트는 객체 입니다.
– DOM에서 제공하는 API를 제어하여 이러한 객체들에 접근하는 것이 가능하며,
콘트롤하는것이 가능합니다.
※네이티브객체 : 자바스크립트내에 미리 만들어진 객체
ex) Date, Array, Math….
호스트객체 : 자바스크립트 실행환경에서 만들어진 객체
ex) 웹브라우저에서 제공하는 객체
폼(form), 이미지(image), 요소(element)
1. node(노드) : 어떤 연결망에서 특정지점과 지점을 연결하는 것]
(1)element node – <body>, <p>, <ul>….
(2)text node – 웹문서에서 내용에 해당하는 부분
<p>이부분이 텍스트노드</p>
(3)attribute node – <p title=”이부분이 속성노드”>aaaaaaaaaaaaaa</p>
DOM 코어 API
– getElementById
– getElementsByTagName
– getAttribute
– setAttribute
– …등
DOM을 지원하는 모든 프로그래밍 언어에서 사용가능함.
HTML-DOM
-(x)HTML 문서에 쓰인 DOM을 이용할때 사용할 수 있는 프로퍼티
ex) form 객체 제공
var form = document.getElementsByTagName(“form”);
= document.form;
var src = element.getAttribute(“src”);
=element.src;
element.setAttribute(“src”, url)
=element.src = url;
getElementById(“_ID”)
– document 와 함께 사용한다.
– 문서 구조에서 id 속성값이 _ID 인 엘레먼트객체를 리턴한다.
ex)document.getElementBy(“_ID”);
getElementsByTagName(“tag”)
– 해당 객체의 자식노드에서 특정 태그(tag)를 사용하는 element들을 배열로 리턴함
ex)element.getElementsByTagNmae(“tag”);
getAttribute()
– object.getAttribute(“attribute”);
Document객체를 사용할 수 없고, 각 요소 객체에서만 동작함.
setAttribute()
-object.setAttribute(“attribute”, value);
document객체를 사용할 수 없고, 각 요소객체에서만 동작함.
HTML DOM를 사용해서 아래와 같이 속성을 읽고 설정 할 수 있습니다.
ex) element.value = “new value”;
소스의 길이가 짧고 가단하다는 장점이 있지만, 폼, 이미지등의 일부요소에서만 동작합니다.
DOM 코어 API를 사용하길 추천합니다.
childNodes
– 해당 요소의 모든 자식요소를 포함하는 배열 리턴함.
– 요소노드뿐만 아니라 모든 형식의 노드를 포함하는 배열 리턴
ex) 태그를 가져오는 방법
1. var body = document.getElementsByTagName(“body”)[0];
2. document.body;
body.childNodes
nodeType;
– node.nodeType;
ex)var typeStr = body.nodeType;
#요소노드의 nodeType 값 : 1
#속성노드의 nodeType 값 : 2
#텍스트노드의 nodeType 값 : 3
nodeName
– 어떤 요소인지 확인가능함 (참고로 저는 디버깅 할때 주로 써요)
– 대문자로 표시 해야함.
– if(element.nodeName == “IMG”);
nodeValue
– 텍스트노드의 값을 바꾸려면 nodeValue를 사용
– node의 값을 가져오거나, 설정 할 수 있다
주의
1) 텍스트는 요소의 첫번째 자식요소이다.
ex)
var obj = document.getElementById(“xxx”)
alert(obj.nodeValue); //null출력
alert(obj.childNodes[0].nodeValue);
firstChild
-node.firstChild
=node.childNodes[0]
lastChild
-node.childNodes[node.childNodes.length-1];
createElement
– 새 요소를 생성한다.
– 노드트리에 새로운 요소를 추가한다.
ex)var newElement = document.createElement(“p”) //
요소생성
removeChild
– parent.removeChild(삭제객체);
–> 리턴 : 삭제된 객체를 리턴한다.
ex) var removeElement = 부모엘리먼트.removeChild(삭제할 객체);
appendChild
– parent.appendChild(child)
ex) var testDIV = document.getElementById(“testDIV”);
var para = document.createElement(“p”);
testDIV.appendChild(para);
createTextNode
-텍스트 노드를 생성
ex) var txt = document.createTextNode(“HELLO”);
para.appendChild(txt);
InserBefore
– parantElement.insertBefore(newElement, targetElement);
InsertAfter
– targetElement의 뒤에 newElement를 추가한다.
– DOM API 가 아님~
fucntion inserAfter(newElement , targetElemnt){
var parent = targetElement.parenNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement, targetElement.nextSibling;
}
}
parentNode
– element의 부모노드를 리턴한다
ex) var parentElement = element.parentNode;
