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"> 这 ...
随机推荐
- angular中的jsonp记录
angular的正常机制采用引入$http服务的形式进行 get post等的访问.但是在跨域访问的时候就需要采用jsonp了. 不废话,直接上示例和引用原文地址: 比如访问地址为 http://ur ...
- Hibernate配置详细解释
hibernate.cfg.xml <!--标准的XML文件的起始行,version='1.0'表明XML的版本,encoding='gb2312'表明XML文件的编码方式--> < ...
- 特殊函数(__all__)
python里__all__ 属性分别于模块和包之中的用法 一. 在模块(*.py)中使用意为导出__all__列表里的类.函数.变量等成员,否则将导出modualA中所有不以下划线开头(私有)的成员 ...
- javaWEB总结(15):jsp指令_page指令
jsp指令 jsp指令是为jsp引擎设计的.他们并不直接产生任何可见输出,而只是告诉引擎如何处理jsp页面的其余部分. 目前定义了page,include和taglib这三种指令. page指令 (1 ...
- ACdream 1020 The Game about KILL
找规律. 11 3 1 3 5 7 1 3 5 7 9 11 13 15 ....... #pragma comment(linker, "/STACK:1024000000,1024000 ...
- Node.js:EventEmitter
概要:本篇博客主要介绍EventEmitter Node.js所有的异步I/O操作在完成时都会发送一个事件到事件队列.事件由EventEmitter对象提供.下面通过一个例子来说明EventEmitt ...
- Node.js:常用工具util
概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...
- JavaScript事件响应的基础语法总结
1.onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用 //例子 <html> <head> ...
- 有关Flash中与Java调用时候注意的一些事项
1.构建本地拓展的ActionScript库时候要注意SWF文件的版本兼容性: 参考:http://help.adobe.com/zh_CN/air/extensions/WS99209310cacd ...
- (转)eclipse自动补全的设置
如果你用过Visual Studio的自动补全功能后,再来用eclipse的自动补全功能,相信大家会有些许失望. 但是eclipse其实是非常强大的,eclipse的自动补全没有VS那么好是因为ecl ...