先说一下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")

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

  1. APPCAN开发笔记:html页面之间的参数传递:使用js获取url中的参数,以及在APPCAN中不能使用的解决方法

    用PHP的GET/POST方式来传递方式已经是司空见惯了,但是如果我的页面是一个静态的html的页面,想传递参数的时候要怎么办呢?在APPCAN的开发中我们会经常遇到这样的问题,因为所有的页面都是静态 ...

  2. js实现获取当前时间是本月第几周和年的第几周的方法

    js实现获取当前时间是本月第几周和年的第几周的方法 获取本月第几周的方法: var getMonthWeek = function (a, b, c) { /** * a = d = 当前日期 * b ...

  3. 【转】分享前端开发中通过js设置/获取cookie的一组方法

    在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...

  4. JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

    $(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i & ...

  5. js实现获取当前时间是本月第几周的方法

    这篇文章主要介绍了js实现获取当前时间是本月第几周的方法,涉及javascript针对日期及时间的相关操作技巧,非常简单实用,需要的朋友可以参考下. 本文实例讲述了js实现获取当前时间是本月第几周的方 ...

  6. JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    本文实例讲述了JS实现获取汉字首字母拼音.全拼音及混拼音的方法.分享给大家供大家参考,具体如下: 这里需要用到一个js获取汉字拼音的插件,可点击此处本站下载. 运行效果如下: 完整示例代码: ? 1 ...

  7. 使用JS准确获取URL网址中参数的几种方法

    记录下使用JS准确获取URL网址中参数的方法: 参考链接1. https://blog.csdn.net/Zhihua_W/article/details/54845945?utm_source=bl ...

  8. JS简单获取当前日期时间的方法(yyyy-MM-dd hh:mm:ss)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  9. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

随机推荐

  1. ◆◆◆◆◆◆◆◆◆◆◆linux下软件包的管理◆◆◆◆◆◆◆◆◆◆◆◆◆◆

    查看与制定的路径名相匹配的软件包 [root@localhost certs]# which ls alias ls='ls --color=auto' /bin/ls [root@localhost ...

  2. debian 学习记录-1 -安装

    之前装ubuntu12. 后来没有继续用,图形界面很不错,没有继续学习原因很多: · 没有基础知识支持(拷贝文件都是用鼠标拖动的) · 图形界面很好,导致没有使用命令行,安装驱动什么的都是靠鼠标点击 ...

  3. Linux C 程序 获取目录信息(16)

    4.获取当前目录getcwd 会将当前工作目录绝对路径复制到参数buf所指的内存空间5.设置工作目录chdir6.获取目录信息opendir打开一个目录readdir读取目录中的内容  读取目录项信息 ...

  4. WinForms 小型HTML服务器

    最近教学,使用到了Apache和IIS,闲着无聊,有种想自己写个小服务器的冲动. 在网上找了半天的资料,最后终于搞定了,测试可以访问.效果图如下: 因为只是处理简单的请求,然后返回请求的页面,所以没有 ...

  5. 如何清除Linux 登陆信息及日志

    本文介绍下,在linux中,如何清除访问日志.登陆日志以及曾用命令的方法.有需要的朋友,参考下吧. 在linux系统中,如何清除访问日志.登陆日志及曾使用过的命令呢? 本文介绍的方法,将删除所有日志, ...

  6. Spark Tungsten揭秘 Day2 Tungsten-sort Based Shuffle

    Spark Tungsten揭秘 Day2 Tungsten-sort Based Shuffle 今天在对钨丝计划思考的基础上,讲解下基于Tungsten的shuffle. 首先解释下概念,Tung ...

  7. Spark小课堂Week3 FirstSparkApp(RDD开发)

    Spark小课堂Week3 FirstSparkApp 问题:Java有哪些数据结构 大致有如下几种,其中List与Map是最重要的: List Map Set Array Heap Stack Qu ...

  8. 【生活】已经从官网购买iPad,单独购买AppleCare+服务

    1 什么是AppleCare+服务 从苹果官网购买的硬件产品如ipad.iphone和MacBook等,官网承诺的保修期限是一年.AppleCare+是水果公司推出的一种保修服务,最大的特点就是将保修 ...

  9. MYsqli 绑定插入与查询实例

    <?php $conn = new mysqli('localhost','root','','orders'); //连接 $prepare = "insert into t100 ...

  10. Unity3d插件iTween的使用

    iTween.cs 下载地址:http://pan.ceeger.com/viewfile.php?file_id=1830&file_key=0UJAymOJ 版本为2.0.43 一.iTw ...