`
ollevere
  • 浏览: 264650 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS nextSibling和previousSibling

    博客分类:
  • JS
 
阅读更多

http://hi.baidu.com/512501372/blog/item/05d344d1e4fb2fd8572c8432.html  参考


需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同
网上大多说不兼容, 我用的FF7.0.1试了下 和 IE效果一样!估计以前的版本不同吧~

 

 

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

 

 

  该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面创建一个1字节位的空白。

  取的时候 使用 nextSibling.nextSibling 或 previousSibling.previousSibling 取

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

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

    总结来说,`nextSibling`和`previousSibling`属性是JavaScript中用于导航DOM树的重要工具,但需要注意不同浏览器之间的解析差异。在实际开发中,使用这些属性时应进行适当的兼容性处理,确保在所有目标平台上都能...

    javascript中的previousSibling和nextSibling的正确用法

    在JavaScript中,nextSibling和previousSibling是两个常用的DOM操作属性,它们用于访问节点树中的下一个和上一个兄弟节点。这两个属性看起来简单直观,但在实际开发中,由于浏览器之间的差异,它们的用法可能会变得...

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

    [Ctrl+A 全选 注:如需...getNextElement(node) 使用介绍js nextSibling属性和previousSibling属性概述及使用注意javascript中的nextSibling使用陷(da)阱(keng)javascript中的previousSibling和nextSibling的正确用法

    JavaScript特效代码大全,想成为js高手吗?还不快来

    6. **DOM遍历**:学习如何遍历DOM树,如父节点(parentNode)、子节点(childNodes)和兄弟节点(nextSibling/previousSibling)等属性,有助于高效地操作网页结构。 7. **函数与闭包**:理解JavaScript的函数是...

    JavaScript脚本80例

    12. **DOM遍历和操作**:如parentElement、children、nextSibling、previousSibling等属性,以及appendChild、insertBefore等方法。 13. **动画和定时器**:使用setTimeout和setInterval实现简单的动画效果。 14. ...

    Javascript+DOM编程艺术

    5. **遍历DOM树**:使用parentNode、childNodes、nextSibling和previousSibling等属性遍历DOM结构。 ### JavaScript与DOM结合应用 1. **动态内容更新**:通过JavaScript和DOM,可以在不刷新页面的情况下更新内容,...

    JavaScriptDOM编程艺术及源代码

    - Traversing DOM:使用firstChild、nextSibling、previousSibling等遍历DOM树。 - CSS选择器:掌握CSS3选择器,如类选择器、ID选择器、属性选择器等,用于更精确地选取元素。 7. **DOM性能优化** - 少操作DOM:...

    nextSibling

    在实际开发中,`nextSibling`常与`previousSibling`一起使用,它们可以方便地遍历和操作DOM树中的元素。另外,如果需要更精确地选择下一个同级元素,可以使用`nextElementSibling`属性,它只返回下一个元素节点,跳...

    JS技巧200例.rar

    这个"JS技巧200例.rar"压缩包文件包含了一份珍贵的学习资源——"JS技巧200例.docx",这可能是作者在学习过程中积累的实战经验与技巧的总结,旨在帮助读者更好地理解和应用JavaScript。 JavaScript主要应用于网页...

    JavaScript网页设计常用300示例

    18. **DOM遍历**:如querySelector、querySelectorAll、nextSibling、previousSibling等方法,用于查找和操作DOM节点。 19. **响应式设计**:使用媒体查询(media queries)和JS来适应不同设备的屏幕尺寸。 20. **...

    浅析JavaScript中浏览器的兼容问题

    在JavaScript中,我们常常用到nextSibling和previousSibling这两个属性来获取一个元素的下一个或上一个兄弟节点。但是,这两个属性可能会获取到文本节点,而且IE8之前的浏览器并不支持获取兄弟元素。 为了兼容IE8及...

    JavaScript and HTML DOM Reference @w3school

    - DOM遍历:父节点(parentNode)、子节点(childNodes)、兄弟节点(nextSibling, previousSibling) - DOM操作:改变元素样式、内容、位置 - 事件模型:捕获阶段、目标阶段、冒泡阶段 - CSS选择器:类选择器、...

    JS操作XMLDOM(遍历和打印)

    `firstChild`和`lastChild`分别返回第一个和最后一个子节点,`nextSibling`和`previousSibling`用于移动到下一个或上一个兄弟节点。 3. **查找特定节点**:使用`getElementsByTagName`,`getElementById`或`...

    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中扫瞄器的兼容问题_.docx

    - `nextSibling` 和 `previousSibling`:这两个属性在所有浏览器中都支持,它们分别返回元素的下一个和上一个同胞节点,可能包括非元素节点(如文本节点)。 - `nextElementSibling` 和 `previousElementSibling`...

    javascript DOM 编程艺术源码

    8. **遍历DOM树**:`childNodes`, `firstChild`, `lastChild`, `nextSibling`, `previousSibling`等属性用于遍历和导航DOM树,找出特定的元素或内容。 9. **DOM2级和3级扩展**:包括`querySelector()`和`...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, 和 `nextSibling`等属性帮助我们移动到树中的其他节点。这在需要处理多个相关元素时非常有用。 总的来说,理解和熟练掌握HTML DOM的...

    JS脚 javascript

    在JavaScript中,没有直接的`siblings`方法,但可以通过访问`previousSibling`和`nextSibling`属性来获取相邻的兄弟元素。若要获取所有兄弟元素,可以使用循环遍历这些属性。 总结来说,这些JavaScript代码示例涵盖...

    JS实现的表格行上下移动操作示例

    - `previousSibling` 和 `nextSibling`: 分别获取节点的前一个和后一个兄弟节点。 - `nextSibling`和`previousSibling`可能不是元素节点,因此需要通过循环来确保找到的节点是元素节点(`nodeType == 1`)。 - `...

Global site tag (gtag.js) - Google Analytics