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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm编码设置为utf-8._python字符编码使用ascii编码对么

    pycharm编码设置为utf-8._python字符编码使用ascii编码对么我试着读入两个文本文件,一个用UTF8编码。我在PyCharm中使用python3。在两个文件中的示例:1.itsgroupareinSpain.itsgroupareinAntarctica.2.susgruposestanenEspaña.susgruposestanenAntártida.在命令行中,我使用:^{pr2}$把文件读入标准输入.在在我的…

    2022年8月28日
    4
  • 解决hash冲突的几种方法_hashmap hash冲突

    解决hash冲突的几种方法_hashmap hash冲突哈希表定义散列表(Hashtable,也叫哈希表),是根据键(Key)而直接访问在内存存储位置的数据结构。也就是说,它通过计算一个关于键值的函数,将所需查询的数据映射到表中一个位置来访问记录,这加快了查找速度。这个映射函数称做散列函数,存放记录的数组称做散列表。实现关键点hash函数hash冲突解决首先来说hash函数,java中对象都已一个hashCode()方法,那为什么还

    2022年8月30日
    4
  • MATLAB柱状图画法(详细)

    首先先给一张柱状图,请注意,ABC三个对比的数据,是分别对应一个数组的每一列,然后贴代码figure(1)axes2=axes(‘position’,[0.1,0.1,0.86,0.8]);%这个是figure里面图的位置和大小,分别为离下边,左边的距离,还有图的高和宽bar(mse_lowhigh);set(gca,’XTickLabel’,{‘0.5′,’1’,’…

    2022年4月5日
    4.2K
  • pycharm2021免费激活码【在线注册码/序列号/破解码】

    pycharm2021免费激活码【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    51
  • C++进制转换(十进制转二进制、八进制、随意进制)

    C++进制转换(十进制转二进制、八进制、随意进制)

    2021年12月14日
    104
  • Android 编译_android线程

    Android 编译_android线程之前本地环境编译一直是正常的,后来更新代码后,出现编译不过。提示outofmemory,但是查看swap和内存都还是够的。里面有个提示,tryincreasingheapsizewithjavaoption’-Xmx’,就按照这个来改。失败截图:解决方案:exportJACK_SERVER_VM_ARGUMENTS=”-Dfile.e

    2025年9月18日
    4

发表回复

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

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