获取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>
I am in second floor
<div> I am in second floor</div>
</div>
<div>
1
<div>
I am in second floor
<div> I am in third floor</div>
</div>
</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div id=”test”>
<div>
I am in second floor
</div>
<div>
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父元素和子元素的更多相关文章
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jquery选择器 之 获取父级元素，子元素，同级元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...
- jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
- jquery选择器:获取父级元素、同级元素、子元素
jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...
- jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
随机推荐
- tomcat启动后 404 页面无法访问
如果修改端口后还不能访问,先关闭tomcat, 在bin目录下命令 ./shutdown.sh 找到80进程 netstat -an | grep 80 杀死80进程 ps -ef | grep h ...
- Leetcode 385.字典序排序
字典序排序 给定一个整数 n, 返回从 1 到 n 的字典顺序. 例如, 给定 n =1 3,返回 [1,10,11,12,13,2,3,4,5,6,7,8,9] . 请尽可能的优化算法的时间复杂度和 ...
- ubuntu 转换图片格式的方法（sam2p, imagemagick)
(1) 终端:sudo apt-get install sam2p sam2p [原图片名.格式] [目标图片名.格式] 即可在同一目录下生成目标图片格式 (2) 终端: sudo apt-get i ...
- Laya Timer原理 & 源码解析
Laya Timer原理 & 源码解析 @author ixenos 2019-03-18 16:26:38 一.原理 1.将所有Handler注册到池中 1.普通Handler在handle ...
- 【JavaScript 10—应用总结】：连缀
一.总体概述 1.1,什么叫连缀 所谓连缀,最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作.比如: <span style="font-size:18px;" ...
- ASP.NET中一般处理程序报的错误:由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值
1.把context.Response.End();代码换成 HttpContext.Current.ApplicationInstance.CompleteRequest(); 2.把context ...
- iOS第三方地图－高德地图（导航sdk路径规划）
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- iOS开发工具篇-AppStore统计工具
苹果官方的iTunes Connect提供的销售数据统计功能比较弱,例如只能保存最近30天的详细销售数据,界面丑陋, 无法查看App的排名历史变化情况等. 早有一些公司提供了专门的解决方案或工具.这些 ...
- bzoj2144 跳跳棋 二分
[bzoj2144]跳跳棋 Description 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子.我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位 ...
- net3：文件上传与图片显示以及HiddenField隐藏字段值的使用
原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...