JS获取节点的兄弟,父级,子级元素的方法


Posted in Javascript onJanuary 09, 2014

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素

<div id="test">
<div></div>
<div></div>
</div>

原生的JS获取ID为test的元素下的子元素。可以用:

var a = docuemnt.getElementById("test").getElementsByTagName("div");  这样是没有问题的

此时a.length=2;

但是如果我们换另一种方法

var b =document.getElementById("test").childNodes; 

此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。

所以,在此,我们就要做处理了,需遍历这些元素,把元素类型为空格而且是文本都删除。

function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}

上述函数遍历子元素,当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。

nodeNames可以得到一个节点的节点类型,/\s/是非空字符在JS里的正则表达式。前面加!,则表示是空字符

test() 方法用于检测一个字符串是否匹配某个模式.语法是: RegExpObject.test(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

nodeValue表示得到这个节点里的值。

removeChild则是删除元素的子元素。

之后,在调用子,父,兄,这些属性之前,调用上面的函数把空格清理一下就可以了

<div id="test">
<div></div>
<div></div>
</div>
<script>
function dom() {
var s= document.getElementById("test");
del_ff(s);    //清理空格
var chils= s.childNodes;  //得到s的全部子节点
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点
var fc=s.firstChild;   //获得s的第一个子节点
var lc=s.lastChile;   //获得s的最后一个子节点
}
</script>

下面介绍JQUERY的父,子,兄弟节点查找方法

jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个

jQuery对象返回,children()则只会返回节点

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 #Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 #Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 #Javascript
fmt:formatDate的输出格式详解
Jan 09 #Javascript
js中window.open()的所有参数详细解析
Jan 09 #Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 #Javascript
解决jquery中美元符号命名冲突问题
Jan 08 #Javascript
You might like
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP count()函数讲解
2019/02/03 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python中分数的相关使用教程
2015/03/30 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python反射的用法实例分析
2018/02/11 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书