JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解
其中属性、元素（标签）、文本都属于节点
<title></title>
<scripttype="text/javascript">
window.onload= function () {
//找d1的所有子节点
//1childNodes获取所有的子节点获取文本节点和元素节点
vard1 = document.getElementById("d1");
for(i=0;i<=d1.length;i++)
//alert(d1.childNodes[i].nodeName); //将会返回所有的文本节点和元素节点
document.body.removeChild(d1);
// for (var i = 0; i< d1.childNodes.length; i++) {
// //节点 node
// //当时文本节点的时候
// if(d1.childNodes[i].nodeType == 3) {
// alert(d1.childNodes[i].nodeValue);
// }
// }
//d1.nodeValue//获取节点的值 只能获取文本节点的值
属性节点 3文本节点
//children 获取子节点只获取元素节点 只有ie支持
// for (var i = 0; i< d1.children.length; i++) {
// alert(d1.children[i]);
// }
//2parentNode父节点
//element元素节点
//node 所有类似的节点 文本属性 元素
// var d11 =document.getElementById("d11");
// var d = d11.parentNode;
// alert(d.id);
//3兄弟节点 Sibling兄弟姐妹
//nextSibling 下一个兄弟节点
// var d2 =document.getElementById("d2");
// var d =d2.nextSibling;
// alert(d.id);
//
// var dd =d2.previousSibling;//上一个兄弟节点
// alert(dd.id);
}
</script>
</head>
<body>
<divid="d1">
d1
<!--123-->
<divid="d11">d11
<div>steee</div>
<div>steee</div>
</div>
<divid="d12">d12</div>
<divid="Div1">d13</div>
</div>
<divid="d2">
d2<divid="d22"></div>
</div>
<divid="d3">
d3<divid="d33"></div>
</div>
</body>
</html>
JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解的更多相关文章
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- Javascript 中childNodes和children的区别
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript中的变量作用域以及变量提升详细介绍
在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解变量作用域 “一个变量的作用域表示这个变量存在的上下文 ...
- javascript中childNodes与children的区别
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
- JavaScript中childNodes和children的区别
我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...
- JavaScript之childNodes属性、nodeType属性学习
1.childNodes属性:在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有元素,它是一个包含这个元素所有子元素的数组. <body> <script typ ...
- Java中UIManager的几种外观的详细讲解
Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...
- linux 中解压与压缩 常用操作详细讲解
平时有时候 会在服务器进行一些文件的操作,比如安装一些服务与软件等等,都有解压操作,一般在 导出一些简单的服务器文件,也是先压缩后再导出,因此,在这里根据平时用到解压与压缩命令的频率来记录下: 1.最 ...
- jQuery中$(function()与(function($)等的区别详细讲解
(function($) {-})(jQuery); 这里实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...
随机推荐
- PHP利器-WAMPServer
为了配置memcacheAdmin,牵涉到搭建PHP的环境,使用的是WAMPServer,安装之后,需要对apache进行配置, 端口,需要将wamp\bin\apache\Apache2.2.21\ ...
- 23个.NET开源项目
Castle是.NET里走过了三年的开源框架,下载地址如:http://www.castleproject.org/index.html ,当然如果你是从事过JAVA开发并用过spring,hiber ...
- Java中double类型的数据精确到小数点后两位
Java中double类型的数据精确到小数点后两位 多余位四舍五入,四种方法 一: double f = 111231.5585;BigDecimal b = new BigDecimal(f); d ...
- 在Eclipse中安装ADT
启动 Eclipse,然后选择 Help > Software Updates….在出现的对话框中,单击 Available Software 选项卡. 单击 Add Site 在 Add Si ...
- poj1436 Horizontally Visible Segments
这是一个区间更新的题目,先将区间放大两倍,至于为什么要放大可以这样解释,按照从左到右有4个区间,y值是[1,5],[1,2],[3,4],[1,4]如果不放大的话,查询[1,4]区间和前面区间的”可见 ...
- qt 原子操作 QAtomicInt（++和--都不是原子操作：都包含三条机器指令）
++和--都不是原子操作:都包含三条机器指令 http://sroply.blog.163.com/blog/static/17092651920106117251539/
- 如何用Python从本地将一个文件备份到Google Drive
1.要有一个Google App账号: 这个可以上网上去申请,申请地址为:https://developers.google.com/appengine/?hl=zh-cn 2.创建一个Google ...
- 在eclipse中使用jetty插件替代m2e开发调试maven web项目
第一步在相应的web项目上配置jetty插件,配置如下: <plugin> <groupId>org.mortbay.jetty</groupId> <art ...
- c++ lambda返回类型自动推导的一些需要注意的地方
一句话,lambda返回类型自动推导走的是auto,而不是decltype,注意. class ObjectA { public: ObjectA() { val_ = ++g; } ObjectA( ...
- 论游戏中Buff的实现 [转]
论游戏中Buff的实现 分类: C/C++ 游戏开发2012-09-13 14:30 574人阅读 评论(6) 收藏 举报 c++游戏开发 源地址:http://blog.codingnow.com/ ...