• js nextSibling属性和previousSibling属性


       1:nextSibling属性

            该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。

           需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:

          先来看一个例子:

    view plaincopy to clipboardprint?
    <body>  
    <div>  
    <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />  
    <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />  
    </div>  
    </bod 
    <body>
    <div>
    <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />
    <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />
    </div>
    </bod       该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面创建一个1字节位的空白。

           IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextSibling.nextSibling了。

           opera和safari对nextSibling的处理方式与FF一致

            2:previousSibling属性

            该属性与nextSibling属性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身,但前提必须是:该标签元素的后面必须有一个同级的元素,否则就返回null了。

           3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

           一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType来获知其标签类型,然后,如果该nextSibling.nodeName = #text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。

            4:它们与parentNode和childs

            例如:<a href="#"><font onclick="javascript: alert(2);">点击我</font></a>

            在这里,我错将A当做FONT的previousSiblilng,结果死也取不到其值。其实,A是FONT的parentNode,FONT是A的childs[0],因为FONT是被包含在A中的。因此,nextSibling和previousSibling一定是与当前标签平级的关系,而不是包含与被包含的关系。

  • 相关阅读:
    File Types过滤Maven项目目录
    Idea中main方法不能正常运行
    《Effective C++》rule 02: Prefer consts, enums, and inlines to #defines
    《Effective C++》 rule 03: Use const whenever possible
    《Effective C++》rule 01: View C++ as a federation of languages
    洛谷B2001 入门测试题目
    SecurityRandom随机数生成
    Java垃圾回收(GC)机制详解
    如何在 Linux 上查找哪个线程cpu利用率最高
    win10自动更新关闭
  • 原文地址:https://www.cnblogs.com/pricks/p/1622098.html
Copyright © 2020-2023  润新知