利用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父元素和子元素的更多相关文章

  1. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  2. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  3. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  4. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. jquery选择器 之 获取父级元素，子元素，同级元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  8. jquery获取元素（父级的兄弟元素的子元素）

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  9. jquery选择器:获取父级元素、同级元素、子元素

    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...

  10. jQuery获取所有父级元素及同级元素及子元素的方法

    jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...

随机推荐

  1. HP DL380 G5 安装操作系统流程

    1.准备服务器引导盘,设置光盘启动.注意:会将服务器所有数据清除 2.依据引导盘选择需要的安装系统 3.插入系统安装光盘.ps:若kvm等远程工具无法插入光盘,需要插入物理介质的安装光盘

  2. cf950f Curfew

    神贪心--写了一个晚上加一个早上. 先考虑只有一个宿管的情况. 首先,如果这个宿舍人多了,多余的人就跑到下一个宿舍.(如果这是最后一个宿舍的话,多的就躺床底下) 如果这个宿舍人少了,但是能从别的宿舍调 ...

  3. Mac下的Eclipse不能记住工作空间问题

    每次启动eclipse都要选择工作空间,即使你勾选了"选择这个作为默认"也不行. Eclipse版本 4.5, mac os版本10.12 找到这个目录下的config.ini文件 ...

  4. python jieba包用法总结

    # coding: utf-8 # ###jieba特性介绍 # 支持三种分词模式: # 精确模式,试图将句子最精确地切开,适合文本分析: # 全模式,把句子中所有的可以成词的词语都扫描出来, 速度非 ...

  5. HDU-4847 Wow! Such Doge!，模拟！

    Wow! Such Doge! 题意:给定的字符串中doge出现了多少次,直接模拟即可,不用KMP. char s[N]; int main() { // int n; int ans=0; whil ...

  6. BZOJ 1012 [JSOI2008]最大数maxnumber【线段树】

    水题,每次记录一下当前有多少个数,然后按照题目所指示的那样模拟就行,每次向线段树末尾插入(其实是修改)题目中指定的数,然后询问当前的个数到前面Q个数中最大值是多少结果就是,好久不碰线段树了,用数组模拟 ...

  7. 【2018.4.5】Shoi2017题集

    这三道题分别对应bzoj4868~4870,pdf没法往这放,因此放弃了. T1: 方法1(正解):三分法 考虑暴力枚举最晚公布的时间x,关注到2操作是没有负面影响的1操作,所以如果A大于B,那么只需 ...

  8. jsp 详解request对象

    request对象 客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例. 序号 方 法 说 明 1  object ...

  9. Mysql字符集与校对规则

    字符集是一套字符和编码的集合,校对规则是用于比较字符集的一套规则. 所以字符集有两部分组成字符集合和对应的编码集合.比如说,现在有这几个字符:A B a b, 假设它们对应的编码分别是00, 01, ...

  10. ajaxpro实现无刷新更新数据库【简单方法】

    原文发布时间为:2008-10-24 -- 来源于本人的百度文章 [由搬家工具导入] 我用的是AjaxPro.2.dll，然后我想点击那个 “无刷新更新” 那个按钮，实现 无刷新 修改表中的内容 HT ...