Javascript节点关系实例分析


Posted in Javascript onMay 15, 2015

本文实例分析了Javascript的节点关系。分享给大家供大家参考。具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点关系</title>
<script type="text/javascript">
function Demo() {
 var divObj = document.getElementById("divDemo");
 //获取父节点
 var parentNode = divObj.parentNode;
 //displayNodeInfo(parentNode);
 //获取子节点
 var childNodes = divObj.childNodes;
 //子节点返回的是一个集合,即数组
 //alert(childNodes.length); //显示节点个数
 //displayNodeInfo(childNodes[0]);
 //获取兄弟节点
 //----------获取上一个兄弟节点
 var preBrotherNode = divObj.previousSibling.previousSibling;
 //标签之间存在空行时,会出现一个空白的文本节点,在获取节点时,一定要注意。
 //displayNodeInfo(preBrotherNode);
 //----------获取下一个兄弟节点
 var nextBrotherNode = divObj.nextSibling;
 displayNodeInfo(nextBrotherNode);
}
function displayNodeInfo(node) {
 alert("Name:" + node.nodeName + ",Type:" + node.nodeType + ",Value:" + node.nodeValue);
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="Demo()" />
<div id="divDemo">div内容</div>
<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
javascript修改图片src的方法
Jan 27 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JavaScript小技巧整理
Dec 30 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 #Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 #Javascript
Javascript进制转换实例分析
May 14 #Javascript
Javascript中For In语句用法实例
May 14 #Javascript
Javascript中With语句用法实例
May 14 #Javascript
javascript用函数实现对象的方法
May 14 #Javascript
javascript中动态函数用法实例分析
May 14 #Javascript
You might like
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
详解python中的json的基本使用方法
2016/12/21 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python清理子进程机制剖析
2017/11/23 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
平面设计师的工作职责
2013/11/21 职场文书
网络教育自我鉴定
2014/02/04 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
教师先进事迹材料
2014/12/16 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
建议书格式
2015/02/04 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
自荐信范文
2019/05/20 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python