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添加输出窗口的代码
Feb 07 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
Javascript自定义事件详解
Jan 13 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
微信小程序自定义单项选择器样式
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代码运行时间查看类代码分享
2011/08/06 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
vue如何截取字符串
2019/05/06 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python 编写简单网页服务器的实例
2018/06/01 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
网上蛋糕店创业计划书
2014/01/24 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
统计岗位职责
2014/02/21 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
2015年行政部工作总结
2015/04/28 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
红白喜事主持词
2015/07/06 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL