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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
javascript的BOM汇总
Jul 16 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 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 - Html Transfer Code
2006/10/09 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
python生成器的使用方法
2013/11/21 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python模拟Django框架实例
2016/05/17 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
学院领导推荐信
2013/10/30 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
高三体育教学反思
2014/01/29 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
个人委托书范本
2014/04/02 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
护理医院见习报告
2014/11/03 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
python 如何用terminal输入参数
2021/05/25 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server