js nextSibling属性和previousSibling属性

js nextSibling属性和previousSibling属性   1:nextSibling属性       该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。      需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:     先来看一个例子: [javascript] viewplain copy<body>  <div>  <…

大家好,又见面了,我是你们的朋友全栈君。

   1:nextSibling属性

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

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

      先来看一个例子:

 

[javascript] 
view plain
 copy

  1. <body>  
  2. <div>  
  3. <input id=“a4” type=“button” οnclick=“alert(this.nextSibling);” value=“d” />  
  4. <input id=“a5” type=“button” οnclick=“alert(this.nextSibling);” value=“e” />  
  5. </div>  
  6. </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等其他常用标签元素属性来获取其属性。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159807.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 关于RecyclerView的notifyDataSetChanged

    关于RecyclerView的notifyDataSetChanged在很久以前,总觉得ListView的notifyDataSetChanged之类的方法很神奇,数据更新后,调用一下,视图就变了…不过自从知道观察者模式以后就没感觉么神奇了,反而对View的绘制测量一系列精细的计算叹为观止—虽然从某种程度上来说,Android的源代码其实挺臃肿的。后面推出了RecyclerView,但其实更新机制并无不同。就如调用notifyDataSetChanged方法:…

    2022年6月29日
    27
  • 用java实现笛卡尔积_Java实现笛卡尔积

    用java实现笛卡尔积_Java实现笛卡尔积publicclassSingleton{privatestaticSingletonintance;privateSingleton(){}publicstaticSingletongetInstance(){/**一开始多线程进来,遇到锁,一个线程进去,是为空,new对象;后续线程进入,不为空,不操作;最后直接返回*对象不为/***笛卡尔积工具类….

    2022年7月27日
    13
  • 如何解决vscode感叹号无法建立html文件的问题

    如何解决vscode感叹号无法建立html文件的问题今天是我使用vscode的第二天,没想到昨天还能用感叹号(!)建立文件模板的vscode今天却不行了,而且中途也重装过一次。虽然重装后能用感叹号(!)弄一个模板出来,但是在此新建文件的时候就没用了。所以我一直在思索为什么会这样,最终功夫不负有心人还是给我找到了。在此,谢谢那位给我指名方向的大佬。正确方法是输入html:5,然后回车就能出现模板了。因为vscode升级了,所以关于模板的设定可能出现了一些变化吧。在这里恳求大家了,如果各位读者觉得好用的话就动动小手点赞吧。拜托了。…

    2022年8月22日
    10
  • pycharm默认编码_编码需要注意什么

    pycharm默认编码_编码需要注意什么这两天爬取东西的时候经常出现编码的问题,错误如下:UnicodeEncodeError:’gbk’codeccan’tencodecharacter’\xa9’inposition75:illegalmultibytesequ找了很多资料也没发现有用的,问了一些朋友也不知道,然后自己试着改了下pycharm的一些东西,就好了具体步骤:File–&gt;Se…

    2022年8月27日
    3
  • Operand should contain 1 column(s)

    Operand should contain 1 column(s)

    2022年1月18日
    96
  • HTML(css+div)登录界面

    HTML(css+div)登录界面HTML(css+div)登录界面

    2022年6月8日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号