2009년 05월 31일
DOM 탐색하기
<html>
<head>
<title>Introductio to the DOM</title>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the Dom is awesome,here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>
루트 엘리먼트인 html엘리먼트는 접근하기가 간단하다.
document.documentElement
우리는 여기서 body엘리먼트의 h1엘리먼트에 접근하기 위해서 다음과 같이 해볼지 모릅니다.
document.documentElement.firstChild.nextSibling.firstChild
하지만 결과는 우리가 생각한것과는 다르게 title엘리먼트를 가리키게 될것이다.
그 원인은 xml에서 가장 성가시고 가장 많은 논쟁을 불러온, 공백문제이다.
DOM에서 공백 다루기
XML 문서의 공백 버그 피해가는 방법
function cleanWhitespace(element){
element = element || document;
var cur = element.firstChild;
while(cur != null){
if(cur.nodeType == 3 && !/\S/.test(cur.nodeValue)){
element.removeChild(cur);
}else if(cur.nodeType == 1){
cleanWhitespace(cur);
}
cur = cur.nextSibling;
}
}
간단한 DOM노드 탐색
이전의 형제 엘리먼트를 찾는 함수
function prev(elem){
do{
elem = elem.previousSibling;
}while(elem && elem.nodeType != 1);
return elem;
}
현재 엘리먼트의 다음 에릴먼트를 반환하는 함수
function next(elem){
do{
elem = elem.nextSibling;
}while(elem && elem.nodeType != 1);
return elem;
}
현재 엘리먼트의 첫번째 자식 엘리먼트를 반환하는 함수
function first(elem){
elem = elem.firstChild;
return elem && elem.nodeType != 1 ?
next (elem) : elem;
}
마지막 자식 엘리먼트를 반환하는 함수
function last(elem){
elem = elem.lastChild;
return elem && elem.nodeType != 1 ?
prev(elem) : elem;
}
현재 엘리먼트의 부모 엘리먼트를 반환하는 함수
function parent(elem,num){
num = num || 1;
for(var i = 0; i< num; i++){
if(elem != null) elem = elem.parentNode;
return elem;
}
}
# by | 2009/05/31 13:44 | 트랙백
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]