JS查找孩子节点简单示例


Posted in Javascript onJuly 25, 2019

本文实例讲述了JS查找孩子节点功能。分享给大家供大家参考,具体如下:

以前看了JS方面的书,如今用到了,书看得再多,不用就忘了,所以经常用用你所学到的知识,温故知新。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>3water.com 查找孩子结点</title>
<meta keywords="商品目录"/>
<meta description="JS查找孩子节点"/>
<script type="text/javascript">
   function getContent()
   {
   var x=document.getElementById("content");
   for(var i=0;i<x.childNodes.length;i++)
   {
     if((content=x.childNodes[i].innerHTML)=="目录")
     {
      var next=x.childNodes[i].nextSibling.nextSibling.textContent;
      console.log(next);
     }
   }
   }
   window.onload=getContent;
</script>
</head>
<body>
<div id="content">
<h3>商品</h3>
<div id="1">
 <p >this is the first paragragh</p>
</div>
<h3>作者</h3>
<div id="2">
 <p>this is the second paragragh</p>
</div>
<h3>目录</h3>
<div id="3">
 <p>this is the third paragragh</p>
</div>
</div>
</body>
</html>

运行结果:

JS查找孩子节点简单示例

还需要努力和实践,坚持,加油。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
JS运算符简单用法示例
Jan 19 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 #Javascript
You might like
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
js数组的操作指南
2014/12/28 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
为什么会有内存对齐
2016/10/10 面试题
销售工作岗位职责
2013/12/24 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
大学生党员个人总结
2015/02/13 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
详解PyTorch模型保存与加载
2022/04/28 Python