DOM操作-引用同级的元素
代码:
————————————————————————————————
<script type="text/javascript">
//获取同级按钮的value
function getLevelBtnVal(btn){
var p = btn.parentNode; //通过单击按钮获取它的父节点
var children = p.childNodes; //得到父节点的所有子节点
//遍历子节点
for(var i=0; i<children.length; i++){
//判断不是当前节点,但是同类节点的节点
if(children[i] != btn && children[i].nodeType==btn.nodeType){
alert(children[i].value); //提示对方的value值
}
}
}
</script>
————————————————————————————————
<body style="text-align:center">
<p>
<!-- 定义按钮 -->
<input type="button" value="获取同级按钮的value"
onclick="getLevelBtnVal(this);"/>
<input type="button" value="获取同级按钮的value2"
onclick="getLevelBtnVal(this);"/>
<input type="text" value="3" onclick="getLevelBtnVal(this);"/>
</p>
</body>
—————————————————————————————————
DOM操作-引用同级的元素的更多相关文章
- DOM操作,控制HTML元素 (原生JS)
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...
- DOM操作-动态创建网页元素
动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一 代码: <!DOCTYPE html> <html> <head> <title ...
- jQuery使用(四):DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- DOM操作-倒排序子元素
代码: —————————————————————————————— <script type="text/javascript"> // ...
- JavaScrip——DOM操作(查找HTML元素/修改元素)
innerHTML 1.查找元素——document.getElementById("intro") 2.输出查找的结果: (1)var a=document.getElement ...
- 实现类数组转化成数组(DOM 操作获得的返回元素值是一个类数组)
目标 实现类数组转化成数组 实例 链接地址 使用方法 const foo = document.querySelectorAll('.result') //链接地址输入控制台输入这行代码 const ...
- DOM操作元素
DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- DOM 操作属性
DOM操作就是针对对象的操作 先写一个按钮,<input tupe="button" value="" id="id"> 这 ...
随机推荐
- stm32 串口乱码的解决
版权声明:本文为博主原创文章. 前几天在中移物联网申请了一个迷你开发板,运行官方提供的程序,感觉板子是正常的.但是自己写的程序能够刷到板子上,但是串口却是乱码.官方和我的额程序都是用的库函数的方式写的 ...
- 写了一下午的dijkstra。突然发现我写的根本不是dijkstra。。。。是没优化过的BFS.......
写了一下午的dijkstra.突然发现我写的根本不是dijkstra....是没优化过的BFS.......
- SVD分解技术详解
版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...
- GBDT详解
GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种迭代的决策树算法,该算法由多棵决 ...
- PostgreSQL学习手册
事实上之前有很长一段时间都在纠结是否有必要好好学习它,但是始终都没有一个很好的理由说服自己.甚至是直到这个项目最终决定选用PostgreSQL 时,我都没有真正意识到学习它的价值,当时只是想反正和其它 ...
- C#_FindWindow
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Chapter 2 Open Book——31
"It's too bad about the snow, isn't it?" Edward asked. I had the feeling that he was forci ...
- css3制作导航栏
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- bzoj1417: Pku3156 Interconnect
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1417 1417: Pku3156 Interconnect Time Limit: 10 ...
- HttpPost与HttpVerbs.Post属性的区别
1. the HttpPost attribute is a short for the HttpVerbs.Post one but since MVC 2.0. 从MVC 2.0之后HttpPos ...