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检测函数
May 31 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
vue v-model动态生成详解
Jun 30 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 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水印
2007/03/16 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
django缓存配置的几种方法详解
2018/07/16 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python基于opencv实现人脸识别
2021/01/04 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
大学生职业生涯规划书前言
2014/01/09 职场文书
秋游活动策划方案
2014/02/16 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书