JavaScript DOM TREE 탐색, 텍스트노드 주의할점

function findChildNode(){

                                        //텍스트 노드는 자식을 가질수 없다.

                                        var page = document.getElementById("sample_page");

                                        var children = page.childNodes;

                                       

                                        console.log("child갯수 : " + children.length);

                                        for(var i = 0 ; i<children.length; i ++) {

                                                     children[i].style.border="4px solid red";

                                        }

                                       

 

                           }

 

 

--이거 찾으면

Uncaught TypeError: Cannot set property 'border' of undefined

--이거 찾으면 이게 뜬다 왜냐면 텍스트 노드에는 해당 스타일을 줄수 없기 때문에. 텍스트노드도 자식이다.

 

따라서

if(children[i].nodeType == 1){

                                                                  children[i].style.border="4px solid red";

 

                                                     }

 

이런식으로 써줘야함. nodeType이 1이면 엘리먼트 노드이고, 텍스트노드는 3이다.

참고로 다음과 같이 이용할수도있음

page.lastChild.style.color = "blue";

마찬가지로 부모놈 찾기
function findParentNode(){
var me = document.getElementById("header");
var parent = me.parentNode;

parent.style.border="3px solid black";
}

마찬가지로 형제놈 찾기
앞에 오는 형제들도 찾을수 있다

previousSibiling 이런거 사용하면 됨