zoukankan      html  css  js  c++  java
  • js nextSibling属性和previousSibling属性概述及使用注意

    nextSibling属性:该属性表示当前节点的下一个节点;如果其后没有与其同级的节点,则返回null;previousSibling属性:该属性与nextSibling属性的作用正好相反,接下来将详细介绍下,感兴趣的你不妨了解下哦,或许对你有所帮助
     
    1:nextSibling属性 
    该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。 
    需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 
    先来看一个例子: 

    <body> 
    <div> </div>
    <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" /> 
    <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" /> 

    </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等其他常用标签元素属性来获取其属性。
  • 相关阅读:
    tfs+git
    fis3 部署手册
    git +vs2017 操作手册+目前工作流程图
    Git 分支策略
    git 分回滚后无法合并代码问题
    git 拉取远程分支到本地并建立关联关系
    mysql查看数据库大小或者表大小
    centos7.4安装高可用(haproxy+keepalived实现)kubernetes1.6.0集群(开启TLS认证)
    centos7.4安装kubernetes1.6.0(开启TLS认证)
    Centos搭建http代理服务器(无密码验证)
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/4378731.html
Copyright © 2011-2022 走看看