获取DOM父元素和子元素

利用javascript可以遍历DOM树，这篇文章介绍用获取一个DOM元素的所有父节点和获取一个DOM元素的所以子孙节点。

1.获取所有父节点。用递归的方法，用parentNode属性。

<!DOCTYPE html>

<html lang=”en” >

<head>

　　<title>getParents</title>

</head>

<body >

　　<div >

　　　　<div id=”test”> </div>

　　　　<div></div>

　　</div>

<script type=”text/javascript”>

　　var getParents=function(id){

　　　　var dom=id.parentNode;

　　　　while(dom.tagName!=null){

　　　　　　document.write(dom.tagName);

　　　　　　dom=dom.parentNode;

　　　　}

　　　　return dom;

　　}

　　getParents(test);

</script>

</body>

</html>

运行结果（chrome、firefox、IE9）：DIVBODYHTML

2.遍历所有子孙节点。

<!DOCTYPE HTML>

<html>

<head>

　　<meta charset = “utf-8″/>

　　<title>getChildren</title>

</head>

<body>

　　<div>
　　　　&nbsp;&nbsp;I am in second floor

　　　　<div>&nbsp;&nbsp;I am in second floor</div>

　　</div>

　　<div>
　　　　1

　　　　<div>
　　　　　　&nbsp;&nbsp;I am in second floor

　　　　　　<div>&nbsp;&nbsp;&nbsp;&nbsp;I am in third floor</div>

　　　　</div>

　　</div>

　　<div>1</div>

　　<div>1</div>

　　<div>1</div>

　　<div id=”test”>

　　　　<div>
　　　　　　　&nbsp;&nbsp;I am in second floor
　　　　</div>

　　　　<div>
　　　　　　  &nbsp;&nbsp;I am in second floor
　　　　</div>

　　</div>

<script type=”text/javascript”>

var node;

node = document.getElementsByTagName(‘body’);

//深度遍历

function getChildren(node,f){ //f表示第几层，根元素为第0层

　　if(node.nodeType!=3){

　　　　console.log(“nodename: “+node.nodeName);

　　　　console.log(“nodetype: ” + node.nodeType);

　　　　console.log(“the “+f+”th floor”);

　　　　var childlist = node.childNodes;

　　　　console.log(childlist);

　　　　var length;

　　　　length = childlist.length;

　　　　if(childlist.length>0){

　　　　　　var f = f+1;

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

　　　　　　　　getChildren(childlist[i],f);

　　　　　　}

　　　　}

　　}else if(node.nodeValue.length > 1){ //因为每个nodeValue都带一个换行符”%0A”

　　　　console.log(“value: “+node.nodeValue);

　　}

}

getChildren(node[0],0);

//层次遍历DOM树

function getChildrenByLev(arr,f,Matri){ //f表示第几层，根元素为第0层,arr表示遍历起始层的节点，Matri为层次遍历输出的结果，结果以一个二维数组表示，第一个索引表示层次

　　if(arr.length<)return Matri;

　　f = f+1;

　　Matri[f] = Matri[f] || new Array();

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

　　　　children = arr[i].childNodes;

　　　　for(j in children){

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

　　　　　　　　Matri[f].push(children[j]);

　　　　　　}

　　　　}

　　}

　　getChildrenByLev(Matri[f],f,Matri);

}

var levelMatri = new Array();

levelMatri[0] = new Array();

levelMatri[0][0] = node[0];

getChildrenByLev(node,0,levelMatri);

console.log(levelMatri);

</script>

</body>

</html>

深度遍历的结果如图（注意：截图不全）：

层次遍历的结果如图：

巴特西

获取DOM父元素和子元素

最新文章

热门文章