关于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. SQLServer的ISNULL函数和Mysql的IFNULL函数

    SQL Serve的ISNULL函数: ISNULL(check_expression,replacement_value) 1.check_expression与replacement_value的 ...

  2. OpenJDK 8 on Windows

    OpenJDK官网提供了非Windows已编译版本的下载. JDK 8的Windows安装版本目前网上提供有两种版本: 1.RED HAT发布的OpenJDK 8 Windows版 2.ojdkbui ...

  3. HDOJ/HDU 2140 Michael Scofield's letter(字符转换~)

    Problem Description I believe many people are the fans of prison break. How clever Michael is!! In o ...

  4. What is happening in Crockford's object creation technique?

    What is happening in Crockford's object creation technique? http://stackoverflow.com/questions/27660 ...

  5. xml 与 DataSet 互相转换

    本文转载:http://www.cnblogs.com/30ErLi/archive/2010/09/21/1832694.html XmlDatasetConvert 该类提供了四种方法: 1.将x ...

  6. [翻译] GVUserDefaults

    GVUserDefaults Tired of writing all that code to get and set defaults in NSUserDefaults? Want to hav ...

  7. Android框架之网络开发框架Volley

    1. Volley简单介绍 我们平时在开发Android应用的时候不可避免地都须要用到网络技术.而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进 ...

  8. OGG-01224 Bad file number

    今天在看OGG的日志时.发现例如以下OGG-01224 Bad file number错误.查阅资料才知道port不可用,看了一下mgr的參数,发现是设置的DYNAMICPORTLIST 动态port ...

  9. mybatis13 resultMap

    resultMap(入门) resultType :指定输出结果的类型(pojo.简单类型.hashmap..),将sql查询结果映射为java对象 . 使用resultType注意:sql查询的列名 ...

  10. mysql 学习笔记5-- 数据库优化

    ext4:(rw,noatime,nodiratime,nobarrier,data=ordered)xfs: (rw,noatime,nodiratim,nobarrier,logbufs=8,lo ...