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图片预加载 等比缩放实现代码
Oct 04 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
vue vant中picker组件的使用
Nov 03 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编程与应用
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python查看数据类型的方法
2019/10/12 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python如何代码集体右移
2020/07/20 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
社区志愿者心得体会
2014/01/03 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
模范教师事迹材料
2014/02/10 职场文书
美化环境标语
2014/06/20 职场文书
国际贸易求职信
2014/07/05 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang