关于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. Xcode插件筛选

    Xcode高效插件推荐 好像很多iOS开发的同学都不知道Xcode有插件这么一说,所以整理了一下自己用的Xcode高效插件,分享给大家 下列插件在Xcode 7.0.1 版本做测试通过可以使用 在Xc ...

  2. Tyvj P3119 核电站问题 动态规划

    题目:http://tyvj.cn/p/3119 P3119 核电站问题 时间: 1000ms / 空间: 65536KiB / Java类名: Main 描述 一个核电站有N个放核物质的坑,坑排列在 ...

  3. linux 多线程基础3

    一．线程属性 线程具有属性,用pthread_attr_t表示,在对该结构进行处理之前必须进行初始化,在使用后需要对其去除初始化.我们用pthread_attr_init函数对其初始化,用pthrea ...

  4. 利用xshell从windows上传文件到虚拟机

    Xshell实现Windows上传文件到Linux主机 经常有这样的需求,我们在Windows下载的软件包,如何上传到远程Linux主机上?还有如何从Linux主机下载软件包到Windows下:之前我 ...

  5. ByteBuffer使用之道

    缓冲区分配和包装  在能够读和写之前,必须有一个缓冲区,用静态方法 allocate() 来分配缓冲区:  ByteBuffer buffer = ByteBuffer.allocate(1024); ...

  6. 保存网页MHT

    uses ADODB_TLB, CDO_TLB, ComObj,MSHTML;{$R *.dfm}{能把网页如 WWW.QQ.COM保存为一个单文件 .MHT但不能把一个 A.HTM 保存为一个单文件 ...

  7. Activiti5.16.4数据库表结构

    一.ACTIVITI 数据库E-R图(5.16.4) Activiti 5.16.4 总共有24张表,增加act_evt_log(事件日志),以及增加了对SasS的支持. 在流程定义.运行实例和历史的 ...

  8. flex利用webservice上传照片

    WebService端代码 /// <summary> /// 上传文件到远程server /// </summary> /// <param name="fi ...

  9. 从零開始开发Android版2048 （一）初始化界面

    自学Android一个月多了,一直在工作之余零零散散地看一些东西.感觉经常使用的东西都有些了解了,可是一開始写代码总会出各种奇葩的问题.感觉还是代码写得太少.这样继续杂乱地学习下去进度也太慢了,并且学 ...

  10. linux 系统调优2

    换作Linux:  1.杀使用内存大,非必要的进程 2.增加连接数 3.磁盘分区的碎片整理 4.服务优化,把不要的服务关闭 5.更换性能更好的硬件,纵向升级 常见优化手段: 1.更换性能更好的硬件,纵 ...