js中元素结点的引用
2024-09-02 03:53:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"> function getDom01(){
//var divs = document.querySelectorAll("#box > div");
//var div = document.querySelector("#box1");
//得到子节点 和父节点
//得到父节点 level by level
var div = document.getElementById("box1");
var p = div.parentNode;
console.log(div);
console.log(p); //得到子节点
var c = div.childNodes;
/* for(var i=0; i<c.length;i++){
console.log(c[i].nodeName);
}*/ var pre = div.previousSibling;
console.log(pre);
var next = div.nextSibling;
console.log(next);
}
</script>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01">
<hr>
<div id="box">
<div id="box1">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div><div id="box2">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div>
<div id="box3">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div>
<div id="box4">
<span>this is a span in div 01</span>
<span>this is a span in div 02</span>
</div>
</div>
</body>
</html>
最新文章
- Android中AlarmManager使用示例（持续更新，已经更改）
- Wix 安装部署（一）同MSBuild 自动生成打包文件
- wap页面笔记
- alert对ajax阻塞调查（IE, Chrome, FF）
- 分布式中，zookeeper的部署
- 浅谈dynamic的简单使用用法
- APM终端用户体验监控分析（下）
- delphi 压缩ZLib
- C#中默认的修饰符
- PHP.8-HTML+CSS（二）-HTML详解
- S3C2440 I2C总线控制
- struts2校验器规范错误解决
- ORA-01722: invalid number,ORA-12801
- ListView中添加ScrollView只显示一两行的问题
- mfc subclasswindow attach setwindowlong使用区别
- Company Story | Vistaprint
- Linux 安装配置 Tomcat
- IIS虚拟目录与UNC路径权限初探
- webpack+vue-cil 中proxyTable配置接口地址代理
- 201771010126 王燕《面向对象程序设计（java）》第十一周学习总结