`
jonllen
  • 浏览: 63421 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js的nextSibling和previousSibling兄弟节点

JavaScriptHTML 
阅读更多

nextSibling：取得下一个兄弟节点；
previousSibling：取得上一个兄弟节点；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <script language="JavaScript">
            function test() {
                var node = document.getElementById("li2");
                alert(node.nextSibling.id);
                alert(node.previousSibling.id);
                alert(node.nextSibling.previousSibling.id);
            }
        </script>
    </head>
    <body>
        <ul id="u1">
            <li id="li1" class="li1">Magci</li>
            <li id="li2">J2EE</li>
            <li id="li3">Haha!</li>
        </ul>
        <ul id="u2">
            <li id="li4" class="li1">Magci</li>
            <li id="li5">J2EE</li>
            <li id="li6">Haha!</li>
        </ul>
        <input type="button" value="Click Me!" onClick="test();" />
    </body>
</html>

 

分享到：
| Tiny_Mce编辑器设置图片绝对路径获取当前编 ...
评论
1 楼 yunnysunny 2012-05-27  
这段代码在非IE浏览器上，前面两个alert打印出来的应该都是undefined
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js nextSibling属性和previousSibling属性概述及使用注意

    nextSibling属性:该属性表示当前节点的下一个节点；如果其后没有与其同级的节点，则返回...previousSibling属性:该属性与nextSibling属性的作用正好相反,接下来将详细介绍下，感兴趣的你不妨了解下哦，或许对你有所帮助

    JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考，具体如下： /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型，上一个(1)or下一个(0) * @return ...

    javascript中的previousSibling和nextSibling的正确用法

    主要介绍了javascript中的previousSibling和nextSibling的正确用法的相关资料,需要的朋友可以参考下

    只能是字母或数字或者是字母和数字的组合的正则previousSibling

    您可能感兴趣的文章:nextSiblingjavascript nextSibling 与 getNextElement(node) 使用介绍js nextSibling属性和previousSibling属性概述及使用注意javascript中的nextSibling使用陷(da)阱(keng)javascript中的...

    DOM 脚本编程中的兄弟节点

    兄弟节点之间可以通过 previousSibling 和 nextSibling 属性访问同一级别上的不同子节点。这个兄弟节点是元素还是文本节点在现代浏览器上运行是怎么样的呢？

    javascript中的nextSibling使用陷(da)阱(keng)

    今天写js的时候遇到了一个陷(da)阱(keng) 关于HTML/XML节点的问题 据说在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点…… 这个我的工作带来了很严重的问题 在网上搜到了很多处理方法，都...

    javascript中节点的最近的相关节点访问方法

    在javascript中对文档中每个节点都有 parentNode——父节点 firstChild——第一个子节点 lastChild——最后一个子节点 previousSibling——紧挨着的前面的兄弟节点 nextSibling——紧挨着的后面的兄弟节点 五个相关...

    javascript nextSibling 与 getNextElement(node) 使用介绍

    javascript nextSibling 与 getNextElement(node) 使用介绍，学习js的朋友可以参考下。

    insertBefore nextSibling 用法

    在指定ID前、内、后插入内容，参考实例。

    详细讲解JS节点知识

    注意大小写一定不能弄错....firstChild 返回当前节点的第一个子节点(只读) Implementation 返回XMLDOMImplementation对象 lastChild 返回当前节点最后一个子节点(只读) nextSibling 返回当前节点的下一个兄弟节点(只读)

    DOMhelp.js

    // JavaScript Document DOMhelp={ //Find the last sibling of the current node lastSibling:function(node){ var tempObj = node[removed].lastChild; while(tempObj.nodeType != 1 && tempObj....

    JavaScript 节点操作 以及DOMDocument属性和方法

    7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回当前节点最后一个子节点(只读) 10nextSibling 返回当前节点的下一个兄弟节点(只读) 1

    javascript对于DOM的操作

    document 树结点 parentElement 父元素 parentNode 父结点 childNodes 所有子结点 有s哦 firstChild 第一个子结点 lastChild 最后一个子结点 nextSibling 下一个兄弟结点 previousSibling 上一个兄弟结点

    仿jQuery的siblings效果的js代码

    代码如下: function siblings(o){//参数o就是想取谁的兄弟节点，... } p=p.previousSibling//最后把上一个节点赋给p } a.reverse()//把顺序反转一下 这样元素的顺序就是按先后的了 var n=o.nextSibling;//再取o的弟弟 w

    javascript dom 操作详解 js加强

    null 2 、 getElementsByTagName 返回一个节点集合 3 、 firstChild 、 lastChild 第一个元素节点，最后一个元素节点 4 、 childNodes 返回所有子节点列表 5 、 previousSibling 前一个兄弟节点 nextSibling 后一个...

    JS遍历DOM文档树的方法实例详解

    遍历文档树通过使用parentNode属性、firstChild属性、lastChild属性、previousSibling属性和nextSibling属性来实现。 1、parentNode属性 该属性返回当前节点的父节点。 [pNode=]obj[removed] pNode：该参数用来存储...

    JavaScript操作HTML DOM节点的基础教程

    因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE：下面提供的例子中的 element 均为元素节点。 获取节点 父子关系 element[removed] element.firstChild/element.lastChild ...

Magicbox
Global site tag (gtag.js) - Google Analytics