• nextSibling VS nextElementSibling


    2.    nextSibling vs nextElementSibling
                {
                    //FF
                    {
                        在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符.
                        这被认为是一个空格, 所以link2的nextSibling就是这个空格,即一个text node,IE不存在这个问题。
                        <a href="link2" id="link2"></a>
                        <a href="link3" id="link3"></a>
                    }
                    
                    //IE
                    {
                        IE不存在这个问题。
                    }
                    
                    //solution
                    {
                        //cause
                        {
                            DOM标准明确说了nextSibling返回当前元素的下一个Node,而<a>元素后的Node明显是一个TextNode,
                            其nodeValue是'
    ',而IE竟然没有返回一个TextNode,跳过了一个Node
                        }
                        
                        //不支持version
                        {
                            FireFox(版本号:3.5.11)中不支持JavaScript的previousSibling属性。
    
                            IE(版本号:8.0.6001.18702)中不支持JavaScript的previousElementSibling属性。
    
                            用jQuery可以达到跨浏览器的支持。
                        }
                        
                        //solution
                        {
                            /最新的浏览器确实已经已经支持如下的DOM标准
                            {
                                Feature     Chrome     Firefox (Gecko)     Internet Explorer                 Opera     Safari
                                Basic support     1     3.5                 9 (IE6-8 incl commend nodes)     10         4
                                
                                //childElementCount
                                {
                                    属性返回当前元素的子元素个数,而不是子节点个数.
                                    只有当一个节点的nodeType属性为1(Node.ELEMENT_NODE==1)时,它才是元素节点.
                                    文本节点和注释节点不属于元素节点.
                                    
                                    //注意
                                    {
                                        另外,由于IE9之前的版本不支持childElementCount属性, 所以如果考虑兼容性的话,
                                        请使用element.children.length(并且需要判断nodeType是否为1)
                                        来代替childElementCount属性.
                                    }
                                }
                                
                                //children    vs childNodes
                                {
                                    children:获取一个元素的【子元素节点】集合
                                    childNodes:获取一个元素的【子节点】集合
                                    (/注意:IE10支持nextSibling.children|childNodes/)
                                    (/        FF23支持netxElementSibling.children|childNodes/)
                                    
                                    //注意
                                    {
                                        在IE9之前,element.children会包含一个元素的子元素节点和子注释节点.
                                        在IE9之后或者其他浏览器中, 只包含子元素节点.
                                    }
                                }
                                
                                //一般人使用nextSibling是不会期望去得到一个换行符的,
                                //所以新版的DOM标准提供了nextElementSibling来跳过这些【空白符和文本节点】
                                {
                                    nextElementSibling        
                                    firstElementChild
                                    lastElementChild
                                    childElementCount
                                    children
                                    previousElementSibling
                                }
                            }
                            
                            //example
                            {
                                var cusName = e.parentNode.previousElementSibling.children[1].value;
                            }
                            
                        }
                    }
                }
            }

    参考链接
    http://ricoyu.iteye.com/blog/940760
    https://developer.mozilla.org/zh-CN/docs/DOM/element.childElementCount
    我在IBM工作,可以为大家内部推荐IBM各种职位 IBM全球职位尽在以下链接(请在浏览器中打开,QQ/微信 会阻止): http://ibmreferrals.com/ 很乐意为感兴趣的小伙伴分享:我的面试经验^_^ 如需咨询,请邮件发送以下邮箱,有问必回 1026096425@qq.com
  • 相关阅读:
    性能碾压 POI !利用模板语法快速生成 Excel 报表
    大庆金桥:基于 SpreadJS 开发实现计量器具检定证书的在线生成与打印
    厦门科云:构建基于 SpreadJS 的管理会计综合实训平台
    为什么 Vue 更符合这个时代的大势所趋
    嵌入SpreadJS,赋能计量器具检定信息化
    GcExcel:比 Apache POI 速度更快、性能更高
    使用SpreadJS 开发在线问卷系统,构筑CCP(云数据采集)平台
    首厚智能:嵌入 SpreadJS 表格组件,搭建实验室信息管理系统(LIMS)
    企业数字化转型:用 SpreadJS 打造互通互链的电力系统物联网
    悲观锁和乐观锁
  • 原文地址:https://www.cnblogs.com/jackydalong/p/3355061.html
Copyright © 2020-2023  润新知