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 new fun的执行过程
Aug 05 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
angularJS 入门基础
Feb 09 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
详解JS模块导入导出
Dec 20 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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注释实例技巧
2008/10/03 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
js内置对象 学习笔记
2011/08/01 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
中专自我鉴定范文
2013/10/16 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
目标责任书格式
2014/07/28 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
先进党员事迹材料
2014/12/24 职场文书
远程教育学习心得体会
2016/01/23 职场文书