关于firstChild&firstElementChild及其同类属性使用，同时分析不同浏览器下child的包含的节点差异

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            window.onload = function (){

                /*本例中所有属性均为只读属性*/

                var oBox = document.getElementById('box');

                var oText = document.getElementById('text');

                oText.innerHTML += '子元素节点统计:<br/>'+oBox.childNodes.length+'<br/><br/>';

                alert(oBox.childNodes.length);

                /*标准：包含文本和元素节点，*同时'包含'非法嵌套节点，如p标签，此处显示 11，共计11个节点*/

                /*非标准：只包含元素节点，*同时'包含'非法嵌套节点，且视为独立节点，在下文的'lastChild.previousSibling'会体现*/

                /*IE7以下'不包含'非法节点，如p标签，将非法节点与它前面的合法节点捆绑，视为一个节点，在下文的lastChild中会体现*/

                oText.innerHTML += '选定的子元素节点类型:<br/>'+oBox.childNodes[0].nodeType+'<br/><br/>';

                alert(oBox.childNodes[0].nodeType);/*获取读取到的元素的节点类型*/

                /*

                 * 常用的三种节点类型

                 * 元素节点：1

                 * 属性节点：2

                 * 文本节点：3

                 */

                oText.innerHTML += '第一个子节点:<br/>'+oBox.firstChild+'<br/>'+oBox.firstChild.innerHTML+'<br/><br/>';

                alert(oBox.firstChild);

                /*IE7以下 显示  object*/

                /*标准浏览器 显示  object Text*/

                alert(oBox.firstChild.innerHTML);

                /*IE7以下 显示  111*/

                /*标准浏览器 显示  undefined*//*因为是文本节点*/

                oText.innerHTML += '最后一个子节点:<br/>'+oBox.lastChild+'<br/>'+oBox.lastChild.innerHTML+'<br/><br/>';

                alert(oBox.lastChild);

                /*IE7以下 显示  object*/

                /*标准浏览器 显示  object Text*/

                alert(oBox.lastChild.innerHTML);

                /*IE7以下 显示

                 * 444

                 * <p>555</p>

                 */

                /*标准浏览器 显示  undefined*//*同样是文本节点*/

                oText.innerHTML += '第一个子节点 的 后一个兄弟节点:<br/>'+oBox.firstChild.nextSibling+'<br/>'+oBox.firstChild.nextSibling.innerHTML+'<br/><br/>';

                /*元素的第一个子节点的后一个兄弟节点*/

                alert(oBox.firstChild.nextSibling);

                /*IE7&8以下 显示  object*/

                /*标准浏览器 显示  object HTMLLiElement*/

                alert(oBox.firstChild.nextSibling.innerHTML);

                /*IE7&8以下 显示 222*/

                /*标准浏览器 显示 111*/

                oText.innerHTML += '最后一个子节点 的 前一个兄弟节点:<br/>'+oBox.lastChild.previousSibling+'<br/>'+oBox.lastChild.previousSibling.innerHTML+'<br/><br/>';

                /*元素的最后一个子节点的前一个兄弟节点*/

                alert(oBox.lastChild.previousSibling);

                /*IE7以下 显示  object*/

                /*IE8 显示  object HTMLLiElement*/

                /*标准浏览器 显示  object HTMLParagraphElement*/

                alert(oBox.lastChild.previousSibling.innerHTML);

                /*IE7以下 显示 333*/

                /*IE8 显示 444*/

                /*标准浏览器 显示 555*//*此处分析，标准浏览器同样将非法节点视为独立节点*/

                /*此处可以看出，对于child

                 * IE7以下 不包含文本节点，并且相较于IE8，将非法节点与其前面的合法节点捆绑，视为一个节点

                 * IE8下 不包含文本节点，相较于IE7以下，包含非法节点，并且视非法节点为独立的节点

                 * 标准浏览器下包含所有节点，如文本及元素等

                 * */

            };

        </script>

    </head>

    <body>

        <ul id="box">

            <li>111</li>

            <li>222</li>

            <li>333</li>

            <li>444</li>

            <p>555</p>

        </ul>

        <div id="text"></div>

    </body>

标准浏览器显示：

子元素节点统计:
11

选定的子元素节点类型:
3

第一个子节点:
[object Text]
undefined

最后一个子节点:
[object Text]
undefined

第一个子节点 的 后一个兄弟节点:
[object HTMLLIElement]
111

最后一个子节点 的 前一个兄弟节点:
[object HTMLParagraphElement]
555

////////////////////////////////////////////////////////////////

IE8显示：

子元素节点统计:
5

选定的子元素节点类型:
1

第一个子节点:
[object
HTMLLIElement]
111

最后一个子节点:
[object
HTMLParagraphElement]
555

第一个子节点 的 后一个兄弟节点:
[object
HTMLLIElement]
222

最后一个子节点 的 前一个兄弟节点:
[object
HTMLLIElement]
444

//////////////////////////////////////////////////////////////////

IE7以下显示

子元素节点统计:
4

选定的子元素节点类型:
1

第一个子节点:
[object]
111

最后一个子节点:
[object]
444

555

第一个子节点 的 后一个兄弟节点:
[object]
222

最后一个子节点 的
前一个兄弟节点:
[object]
333

 
 
兼容方法，通过判断选择使用的属性(必须使用..ElementChild判断)
function zcyFirstChild(){

    /*标准浏览器下，ElementChild为真，返回此属性，非标准下为假，返回Child*/

    var oFirst = oBox.firstElementChild||oBox.firstChild;

    return oFirst;

};

alert(zcyFirstChild().innerHTML);

此方法正常情况可以解决兼容问题，但是如果元素中没有子元素时浏览器会报错

此时可以使用 children 进行子元素获取，此属性只获取元素类节点，不包含文本节点等，但是非法嵌套的差异依旧存在

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            window.onload = function (){

                /*本例中所有属性均为只读属性*/

                var oBox = document.getElementById('box');

                var oText = document.getElementById('text');

                if( oBox.children[0] ){

                    oBox.children[0].style.background = 'red';

                }else{

                    alert(1);

                }

            };

        </script>

    </head>

    <body>

        <ul id="box">

        </ul>

        <div id="text"></div>

    </body>

Child&ElementChild的更多相关文章

  1. MapReduce剖析笔记之七：Child子进程处理Map和Reduce任务的主要流程

    在上一节我们分析了TaskTracker如何对JobTracker分配过来的任务进行初始化,并创建各类JVM启动所需的信息,最终创建JVM的整个过程,本节我们继续来看,JVM启动后,执行的是Child ...

  2. [翻译]AKKA笔记 - CHILD ACTORS与ACTORPATH -6

    原文:http://rerun.me/2014/10/21/akka-notes-child-actors-and-path/ Actor是完全的继承结构.你创建的任何Actor肯定都是一个其他Act ...

  3. php php-5.6.4.tar.bz2 apache 兼容问题 child pid 27858 exit signal Segmentation fault

    环境 [root envirotar]# uname -a Linux i2..el6.x86_64 # SMP Thu Jul :: UTC x86_64 x86_64 x86_64 GNU/Lin ...

  4. [ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action

    概括的讲,View中的内容可以分为静态和动态两部分.静态内容一般是html元素,而动态内容指的是在应用程序运行的时候动态创建的内容.给View添加动态内容的方式可归纳为下面几种: Inline cod ...

  5. 调用Child Package

    使用Execute Package Task,能够在一个package中调用并执行其他package,被调用的Package称作 Child Package,Execute Package Task ...

  6. ORA-02292: integrity constraint (xxxx) violated - child record found

    在更新表的主键字段或DELETE数据时,如果遇到ORA-02292: integrity constraint (xxxx) violated - child record found 这个是因为主外 ...

  7. Child <- many-to-one ->Parent

    网上找到个描述的很精妙的例子 Child   <-   many-to-one   ->Parent         class   Child   {         private   ...

  8. [NHibernate]Parent/Child

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  9. ScrollView can host only one direct child

    Android 采用ScrollView布局时出现异常:ScrollView can host only one direct child. 异常原因: 主要是ScrollView内部只能有一个子元素 ...

随机推荐

  1. ASP.NET内部原理（HttpHandler和HttpModule）

    [IT168 技术文档]在以前的ASP时候,当请求一个*.asp页面文件的时候,这个HTTP请求首先会被一个名为 inetinfo.exe进程所截获,这个进程实际上就是www服务.截获之后它会将这个请 ...

  2. Android线程计时器实现

    cocos2dx的计时器很好用,但当app进入后台,其计时器会pause掉,如果想要一个稳恒计时器就得自己去实现完成了,在Cocos2d-x for ios中我们可以利用NSTimer类并结合objc ...

  3. phpeclipse xdebug 配置配置 -摘自网络

    一.安装配置 1.访问 http://www.phpeclipse.com/ ,找到右边的 1.2.x dev nightly下的http://update.phpeclipse.com/update ...

  4. windows ntp安装及调试

    Setting up NTP on Windows It's very helpful that Meinberg have provided an installer for the highly- ...

  5. 多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客

    多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客 多IDC数据分布--MySQL多机房部署

  6. mysql 插入默认值的问题 sql-mode

    刚好碰到如果不给默认值mysql数据就插入不成功的问题,后来百度了很多,试了下结果 把my.ini里面的[mysqld]的sql-mode 换成下面的一行,如果没有则添加  sql-mode=&quo ...

  7. Coding girl一个老程序员谈到的一个女程序员的故事

    因为有人说我给一个女程序员的建议不靠谱,我不服,因为我的工作经历中的一些女程序员都很不错,比那些男程序员都强,所以,我在新浪微博和twitter上征集女程序员的故事和想法,这两天来,我收到了好几封邮件 ...

  8. 【设计模式 - 23】之模版方法模式（Template）

    1      模式简介 模版方法模式的定义: 模版方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模版方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 模版方法模 ...

  9. 分享一个漂亮的ProgressBar控件

    codeprject上看到的一个漂亮的ProgressBar控件.是用vb.net开发的. C#直接在工具箱中引用即可. 地址:http://www.codeproject.com/Articles/ ...

  10. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...