js与jquery获取子节点、父节点、兄弟节点的方法
js与jquery获取子节点、父节点、兄弟节点的方法
在写代码时,时不时会遇到获取子节点、父节点等需要,但有的时候总是弄混淆不是很清晰,所以针对这些问题,总结了jquery与js获取节点的方法
js方法
<div id="div"><p id = "one">我是爷爷</p><span id="two">我是伯伯</span><div id="three"><span id="threeOne"><span id="threeTwo">孙子1</span><span id="threeFour">孙子2</span></span></div>
</div>
一、js获取父节点
1.parentElement()方法获取父节点,其是IE标准下的方法
var three=document.getElementById('three');
var parent=three.parentElement; //id='div'
2.parentNode获取,其是w3c标准下方法
var three=document.getElementById('three');
var parent=three.parentNode;//id='div'
3.offsetParent获取
该方法返回最近的祖先定位元素
var three=document.getElementById('three');
var parent=three.offsetParent; //是body
parent.style.background="red";
二、js获取子节点
1.通过getElementsByTagName()获取子节点的标签数组,进而获取子节点,
var three=document.getElementById('threeOne');
var span=three.getElementsByTagName('span');//span[0]》id='threeTwo';
2.通过childNodes获取子节点,与children获取结果不同
其返回的是子节点的集合,是一个数组包含换行和空格
var three=document.getElementById('threeOne');var span=three.childNodes;console.log(span);
所以为了进一步获取子节点,需要对chiledNodes进行去除空格和换行处理
for (var i=0;i<span.length;i++){if (span[i].nodeName =='#text'&& !/\s/.test(span.nodeValue)){three.removeChild(span[i]);}}console.log(span);
3.通过children获取,与childNodes获取结果不同
其返回的是包含子节点的一个数组
var three=document.getElementById('threeOne');var span=three.children;//span[0]》id='threeTwo';
4.通过firstChild获取,在测试的时候发现,取得的值为空,发现其父级的children包含空格或换行,所以要对父级的children进行处理,方法同上
var three=document.getElementById('threeOne');var span=three.childNodes;for (var i=0;i<span.length;i++){if (span[i].nodeName =='#text'&& !/\s/.test(span.nodeValue)){three.removeChild(span[i]);}}console.log(three.firstChild)
5.获取最后一个子节点
其直接返回父级下的第一个子节点
var three=document.getElementById('threeOne');
console.log(three.firstElementChild);//<span id="threeTwo">孙子1</span>
6.通过firstElementChild获取
其直接返回父级下的第一个子节点
var three=document.getElementById('threeOne');
console.log(three.lastChild);
lastChild同firstChild一样,也要进行处理
console.log(three.lastElementChild); // <span id="threeFour">孙子2</span>
三、js获取兄弟节点
1.先获取父节点,在获取父节点下面的子节点
var two=document.getElementById('two');
var twoParent=two.parentNode;
console.log(twoParent.children[0]);//id='one';
2.通过previousElementSibling直接获取
var two=document.getElementById('two');
var twoPre=two.previousElementSibling;
console.log(twoPre);//<p id="one">我是爷爷</p>
3.通过previousSibling获取,它与previousElementSibling不同的是,其还包含换行和空格,这里就在进行细述。
var two=document.getElementById('two');
var twoPre=two.previousSibling;
4.获取下个兄弟节点
var two=document.getElementById('two');
var twoPre=two.nextElementSibling;
console.log(twoPre);//<p id="one">我是爷爷</p>
var twoPre=two.nextSibling;//也需要对其进行处理
jquery方法
一、js获取父节点
1.通过parent()方法获取
该方法只会对上一级DOM树进行遍历
var a= $('#threeFour').parent();//id="threeOne"
2.通过parents()
该方法会返回其所有的祖先元素
var a= $('#threeFour').parent();// ```
var a= $('#threeFour').parent();//#threeOne,#three,#div, body, html
3.通过parentsUntil() 方法
该方法返回当前元素到截止元素之间的所有祖先元素
var a= $('#threeFour').parentsUntil('div');//#threeOne
二、js获取父子节点
1.通过children() 方法
该方法返回被选元素的所有直接子元素,对下一级DOM树进行遍历
var a= $('#threeOne').children();//#threeTwo,#threeFour
2.通过find() 方法
该方法会向下一级,找到该元素
var a= $('#threeOne').find('#threeFour');//#threeFour
三、js获取兄弟节点
1.通过 siblings() 方法
该方法返回元素的所有兄弟节点
var a= $('#two').siblings();//#one,#three
2.通过next() 方法
该方法只返回一个元素
var a= $('#two').next();//#three
3.通过nextAll() 方法
该方法返回所有跟随的兄弟元素
var a= $('#one').nextAll();#two,#three
4.通过nextUntil() 方法
该方法返回元素到截止元素之间的兄弟元素
var a= $('#one').nextUntil('#three');#two
prev(), prevAll() & prevUntil() 方法只不过是取目标元素之前的兄弟节点,这里就不一一描述了
js与jquery获取子节点、父节点、兄弟节点的方法相关推荐
- jquery 获取当前元素的前一个兄弟节点元素
jquery 获取当前元素的前一个兄弟节点元素,可以使用 prev() 方法 示例代码 <!DOCTYPE html> <html><head><meta ...
- js和jQuery获取浏览器窗口的高度、宽度的方法详解
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.inn ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素 原生的JS ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS ...
- jQuery保留子节点删除父节点
jQuery保留子节点删除父节点 要处理的html如下 <div><div><div id = "test"> test </div> ...
- 原生js或者jquery获取父级元素/同级元素/下级元素
1.js获取 var s= document.getElementByIdx_x("test"); var chils= s.childNodes; //得到s的全部子节点 va ...
- js获取dom元素的子元素,父元素,兄弟元素小记
原生js var a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; // ...
- jquery获取父级元素、子级元素、兄弟元素的方法
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...
- jquery获取元素(父级的兄弟元素的子元素)
一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
最新文章
- java 密钥工厂 desede_20145212 实验五《Java网络编程》
- java.util.regex.PatternSyntaxException: Unexpected internal error near index 1 \ ^
- Spring运行期间配置文件解析返回
- Redis 未授权访问缺陷可轻易导致系统被黑
- oracle怎么删除lob对象,Oracle系列:LOB大对象处理
- 洛谷P1373 小a和uim之大逃离 动态规划
- if嵌套while循环语句_Python学习笔记015--while循环嵌套
- python编程狮app_Python编程狮官方app下载_Python编程狮安卓app下载 v1.0.8 - 创意手游...
- 穿越“惊世骇俗”的美景
- lbj学习日记 08 输入一组不定个数的数字,并且把它保存在一个数组中
- Shiro session过期跳转到登录页面问题
- movie起居类分类词汇
- 怎样卸载腾讯网页游戏微端服务器,如何删除腾讯页游微端启动器
- dos脚本批量更改照片命名(文字变更数字)
- php 413,PHPCMS上传错误413?
- Linux虚拟主机与Windows虚拟主机之间有什么区别
- (一)BST树(二叉搜索树)
- [Notes] 2018 ALAD:Adversarial Learned Anomaly Detection
- 通达+oa+php+文件+乱,通达OA 任意文件上传+文件包含导致RCE
- python-爬取糗事百科段子
热门文章
- mysql is needed by_虚拟机安装MySQL报** is needed by **错误
- Python搭建简易HTTP/HTTPS文件服务器
- 经济不景气的情况下网站推广营销要怎么做?
- Python自动抢红包,超详细教程,再也不会错过微信红包了!
- C++函数调用栈分布详解
- 满二叉树与完全二叉树
- 关于新加坡的EP和DP
- 基于遗传算法有时间窗、载重约束外卖配送路径优化
- javaMail学习(五)——使用javaMail给Q Q 邮 箱 账 户 发简单邮件
- 微信小程序识别图片并提取文字_微信小程序(图像识别,文字识别)