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 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 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/09/25 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python zip文件 压缩
2008/12/24 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python字典操作简明总结
2015/04/13 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
python中的getter与setter你了解吗
2022/03/24 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers