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中的数学函数
Apr 04 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
实现vuex原理的示例
Oct 21 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
党员岗位承诺书
2014/03/25 职场文书
国旗下演讲稿
2014/05/08 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android