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的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 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程序员的技术成长规划
2016/03/25 PHP
PHPMailer发送邮件
2016/12/28 PHP
php微信开发之关注事件
2018/06/14 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
js实现动态时钟
2020/03/12 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue 组件简介
2020/07/31 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python reduce函数作用及实例解析
2020/05/08 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
pycharm永久激活超详细教程
2020/10/29 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
公司委托书格式
2014/08/01 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
毕业生见习报告总结
2014/11/08 职场文书
九寨沟导游词
2015/02/02 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Python各协议下socket黏包问题原理
2022/04/12 Python