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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
Vue使用vue-cli创建项目
Sep 01 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 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函数(简单整理)
2010/04/30 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
python构建深度神经网络(续)
2018/03/10 Python
python 正确保留多位小数的实例
2018/07/16 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
学习python需要有编程基础吗
2020/06/02 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
影视制作岗位职责
2013/12/04 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
班主任班级寄语大全
2014/04/04 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技