关于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. Parallels Desktop 7用bootcamp安装win7 后如何激活WIN7

    在parallels的选项中,在硬件选项卡的引导标记中添加:kernel.waet.enable=0 ,重新启动win7即可激活.

  2. Bzoj 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 二分

    1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1272  Solve ...

  3. Delphi的四舍五入函数

    一.四舍五入法    四舍五入是一种应用非常广泛的近似计算方法,其有算术舍入法和银行家舍入法两种.    所谓算术舍入法,就是我们通常意义上的四舍五入法.其规则是:当舍去位的数值大于等于5时,在舍去该 ...

  4. Implement the hash table using array / binary search tree

    今天在复习Arrays and String 时看到一个很有趣的问题.希望跟大家分享一下. Implement the hash table using array / binary search t ...

  5. openstack liberty 版本按照官方文档手动整合 完成后 基于dashboard-horizon 创建虚拟机报错 用CL却是成功的 网络等验证都是正确的通过启动的虚拟实例测试以成功

  6. Javascript之<script>标签

    把javascript代码插入到HTML页面中需要使用<script>标签,使用这个元素可以使javascript和html标记混合在一个页面中,也可以引入外部的javascript文件. ...

  7. spf13配置问题

    git clone https://github.com/spf13/spf13-vim.git tab是黑的色 加入这样一行就可以了set nolist if下的黑边在~/.vimrc里面吧inde ...

  8. iOS性能优化中的离屏渲染

    GPU屏幕渲染有以下两种方式: On-Screen Rendering意为当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行. Off-Screen Rendering意为离屏渲染 ...

  9. JSTL 数字日期标签库

    <frm:formatNumber/>标签 该标签依据特定的区域将数字改变为不同的格式来显示. 被格式化的数据<frm:formatNumber> <fmt:format ...

  10. Chapter 4 - How to Fire some Bullets

    Now, we want to let the hero fire some bullets to kill the enemies, add the codes below to set the l ...