<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>兄弟节点previousSibling</title>
</head>
<body>
<ul id="ele">
        <li id='li1'>前端开发课程</li>
        <li id='li2'>javaScript课程</li>
        <li id="li3">HTML5课程</li>
        <li id="li4">CSS课程</li>
        <li id="li5">其它网站开发经典课程</li>
        <li id="li6">jQuery是其中的一部</li>   
</ul>
</body>
    <script type="text/ecmascript">
        function previousSibling(ele) {
            //先判断它支持不支持这个属性
            if (typeof previousElementSibling == 'object') {
                //如果支持直接返回return ele.previousElementSibling;
                return ele.previousElementSibling;
            } else {
                //如果不支持就返回  ele.previousSibling
                //元素的父节点
                ele.previousSibling
                //判断元素的哥哥节点，循环
                do {
                    if (ele.previousSibling&&ele.previousSibling.nodeType=="1") {
                        return ele.previousSibling
                    }else{
                        ele = ele.previousSibling;
                    }
                } while (ele)
                return null;
            }

}
        var oLi1 = document.getElementById("ele").children[0];
        var pre=previousSibling(oLi1)
        alert(pre)//弹出null

//var oLi1 = document.getElementById("ele").children[1];
        //var pre = previousSibling(oLi1)
        //alert(pre)//弹出objectHTMLLIElement
    </script>
</html>

DOM之兄弟节点的更多相关文章

  1. 遍历DOM树，获取所有兄弟节点

    获取兄弟节点的常用方法有:  方法  说明 siblings()  选取所有兄弟节点 next()  选取后面兄弟节点 nextAll()  选取所有后面的兄弟节点 nextUntil()  选取所有 ...

  2. JavaScript的BOM、DOM操作、节点以及表格（二）

    BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型.     BOM提供了独立于内容 而与浏览器窗口进行交互的对象:     BOM由一系列相关的对象构成 ...

  3. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  4. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  5. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  6. DOM简介及节点、属性、查找节点的方法

    DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式 ...

  7. jquery 获取元素(父节点,子节点,兄弟节点)

    费话不多说,直接上代码jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部 ...

  8. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  9. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

随机推荐

  1. [Effective Java]第三章 对所有对象都通用的方法

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. CUBRID学习笔记 26 数据类型3cubrid教程

    接上面的集合 集合之 set 每个集合元素是不同的值, 但是类型只能是一种.也可以有其他表的记录 如下 CREATE TABLE set_tbl ( col_1 set(CHAR(1))); INSE ...

  3. android的简单入门学习

    话说光配环境就整死我了, 不是说多么难, 是最近google被屏了, 很多sdk里面需要下载的东西都下不下来, 坑爹啊.  最后跟扫拉稀要了一个他配置好的,才运行了. android目录分析: ass ...

  4. 不含类解决最后一个li边距问题

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

  5. R 语言的优劣势是什么？

    R 语言的优劣势是什么? 2015-05-27 程序员 大数据小分析   R,不仅仅是一种语言 本文原载于<程序员>杂志2010年第8期,因篇幅所限,有所删减,这里刊登的是全文. 工欲善其 ...

  6. c++ 临时变量

    C++的临时变量 它们是被神所遗弃的孩子,没有人见过它们,更没有人知道它们的名字.它们命中注定徘徊于命运边缘高耸的悬崖和幽深的深渊之间,用自己短暂的生命抚平了生与死之间的缝隙.譬如朝露,却与阳光无缘. ...

  7. [转]ubuntu下安装程序的三种方法

    出处:http://www.cnblogs.com/xwdreamer/p/3623454.html 引言 在ubuntu当中,安装应用程序我所知道的有三种方法,分别是apt-get,dpkg安装de ...

  8. [转载] 深入 superviser

    模块简介 新人接触线上的时候一般都会碰到supervise这个工具,导师对这个模块的解释一般就是,这个模块是监控进程,当进程挂掉之后,supervise会将进程启动.这样当进程出 现问题,如因出cor ...

  9. 抓取oschina上面的代码分享python块区下的 标题和对应URL

    # -*- coding=utf-8 -*- import requests,re from lxml import etree import sys reload(sys) sys.setdefau ...

  10. Object Pascal 方法与技巧

    4 方法与技巧 4.1 设置代码模板 代码模板是Delphi 的代码感知特性的一种,通过它可以快速.高效和正确地输入代码.代码模板将一些常用的语句块保存在模板中,然后程序员只要在代码编辑器中按下“Ct ...