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 XML数据显示为HTML一例
Dec 23 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
jquery队列函数用法实例
Dec 16 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 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遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
ext jquery 简单比较
2010/04/07 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
Python ORM编程基础示例
2020/02/02 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
工商管理毕业生推荐信
2013/12/24 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
活动经费申请报告
2015/05/15 职场文书
医院党建工作总结2015
2015/05/26 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
MySQL 计算连续登录天数
2022/05/11 MySQL