关于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. vijosP1687 细菌总数

    vijosP1687 细菌总数 链接:https://vijos.org/p/1687 [思路] 错排公式+高精度. 题目要求排列数目而且不能有Pi==i的情况出现,可以看出这正是1,2,3,4,5, ...

  2. vijosP1006 晴天小猪历险记之Hill

    vijosP1006 晴天小猪历险记之Hill 链接:https://vijos.org/p/1006 [思路] 图上DP. 这个题的递推顺序是关键.先从上一行得到最小值,然后从本行比较最小值,注意本 ...

  3. git diff old mode 100755 new mode 100644

    755 vs 644 在linux下载了Qt的软件仓库,拷贝了一份到windows下.在 msysgit 下,发现所有的文件都被修改了. 用 git diff 查看,发现是: $ git diff u ...

  4. C++11的资源管理：泛化的RAII

    RAII被认为是c++资源管理的最佳范式,但是c++98中用RAII必须为要管理的资源写一个类,这样一来RAII的使用就有些繁琐了.C++11有了lambda和function后,我们就可以编写泛化的 ...

  5. __attribute__机制介绍 （转）

    1. __attribute__ GNU C的一大特色(却不被初学者所知)就是__attribute__机制. __attribute__可以设置函数属性(Function Attribute).变量 ...

  6. Gof-23种设计模式名称列表

    工欲善其事,必先利其器． 在真正使用设计模式之前,必须知道各个设计模式对应的场景．设计模式是针对某种固定的场景下产生的固定解决方案．只有明确的场景,才会有明确的设计方式和方法． 设计模式全集: Abs ...

  7. myeclipse输入“.”后没有自动提示功能

    今天和室友安装了一样的myeclipse版本,结果室友的自动提示功能有,我的输入"."后却不能提示,这对我们敲代码简直来说是一个折磨,不能自动提示,本来还以为是系统问题,一个是wi ...

  8. phpstudy配置虚拟主机

    配置 phpstudy 虚拟主机 1在httpd.conf中  把#Include conf/extra/httpd-vhosts.conf前面的#去掉 2在站点域名管理 添加 要配置的 虚拟主机 添 ...

  9. hdu 4523 威威猫系列故事——过生日 小模拟

    威威猫系列故事——过生日 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total ...

  10. 【转】SVN:Android Studio设置忽略文件

    Android Studio创建的Android项目一般需要忽略 参考: http://blog.csdn.net/qq_22780533/article/details/51965007 1..id ...