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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
node.js中watch机制详解
Nov 17 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
js倒计时抢购实例
Dec 20 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 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函数代码
2010/04/22 PHP
php防攻击代码升级版
2010/12/29 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
如何离线执行php任务
2017/02/21 PHP
jquery显示隐藏input对象
2014/07/21 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Django后台admin的使用详解
2019/07/08 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python数据分析:关键字提取方式
2020/02/24 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
移风易俗倡议书
2014/04/15 职场文书
淘宝客服工作职责
2014/07/11 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
公务员考察材料
2014/12/23 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书