JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考,具体如下:
/** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象,无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSibling"; var nearEle = ele[type]; while(nearEle) { if(nearEle.nodeType === 1) { return nearEle; } nearEle = nearEle[type]; if(!nearEle) { break; } } return null; } /** * 获取当前执行对象的上一个元素 */ function prev() { return getNearEle(this, 1); } /** * 获取当前执行对象的下一个元素 */ function next() { return getNearEle(this, 0); } // var ele = document.getElementById("xxx"); // var prevElement = prev.call(ele); // var nextElement = next.call(ele);
更多关于JavaScript节点操作相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript基础之查找元素的详细介绍(访问节点)
当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下. DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName().使用这几种方法方法我们可以查找html文档中的任意html元素.getElementById()首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的i
-
用JavaScript实现用一个DIV来包装文本元素节点
当你的应用需要依赖某个特定的JavaScript类库时,你无意中总会试图解决某些类库自身的问题,而不是语言的问题.就比如当我试图将文本(可能也包含HTML元素)用一个DIV元素包起来时.假设有以下HTML: This is some text and <a href="">a link</a> 这时候如果想把它转换为下面这样: <div>This is some text and <a href="">a link&l
-
Js 获取HTML DOM节点元素的方法小结
如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取: (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如今,已经出现了如proto
-
一个获取第n个元素节点的js函数
一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善 演示:html <ul id="list"> <li>1<button>a</button></li> <li>2<button>b</button><button>o</button></li> <p>test</p> <li>3<bu
-
JS获取节点的兄弟,父级,子级元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下: <div id="test"><div></div><div></div></div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementByI
-
javascript删除一个html元素节点的方法
本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们
-
js遍历子节点子元素附属性及方法
复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod
-
JS 使用for循环遍历子节点查找元素
这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素 function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<count;i++){ if(node==undefined || node.children[i]==undefined){ continue; } if(clazz){ if(node.children[i].getAttribute('cla
-
javascript删除元素节点removeChild()用法实例
本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme
-
js创建元素(节点)示例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
随机推荐
- 不使用中间变量,交换int型的 a, b两个变量的值。
- JavaScript模块化开发之SeaJS
- Python使用正则匹配实现抓图代码分享
- C语言中多维数组的内存分配和释放(malloc与free)的方法
- Android SharedPreferences的使用分析
- 安装mysql noinstall zip版
- mysql字符集和数据库引擎修改方法分享
- js跨域问题之跨域iframe自适应大小实现代码
- php无限极分类递归排序实现方法
- 详解javascript中原始数据类型Null和Undefined
- python在指定目录下查找gif文件的方法
- WGA提示:您可能是软件盗版的受害者
- jQuery插件zTree实现的基本树与节点获取操作示例
- 基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
- jquery实现触发时更新下拉列表内容的方法
- Java Socket编程实现简单的问候服务
- python+pandas分析nginx日志的实例
- 易语言关于程序进程和线程的基础知识
- TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
- pytorch在fintune时将sequential中的层输出方法,以vgg为例