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获取textarea中的光标位置
May 06 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
浅析vue.js数组的变异方法
Jun 30 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/01/20 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
javascript中关于执行环境的杂谈
2011/08/14 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python随机数函数代码实例解析
2020/02/09 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
大学军训感言1500字
2014/03/09 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
php png失真的原因及解决办法
2021/11/17 PHP