<!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

     </head>

     <body>

         <ul id="ul1">

             <li>0001</li>

             <li>0002</li>

             <li>0003</li>

             <li>0004</li>

         </ul>

         <script>

             window.onload = function() {

                 var oUl = document.getElementById('ul1');

                 /**

                     获取第一个子元素

                     obj.firstChild

                     标准浏览器下会取到文本节点

                     非标准浏览器下只会取到元素节点

                     obj.firstElementChild

                     标准浏览器下只会取到元素节点

                     非标准浏览器不认识该属性

                     兼容代码

                     if(obj.firstElementChild){

                         obj.firstElementChild.style.background='red';

                     }else{

                         obj.firstChild.style.background='red';

                     }

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

                     if( oFirst ){

                         oFirst.style.background = 'red';

                     }

                     以上兼容代码都有BUG so 使用一下代码查找第一个子obj

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

                 */

                 var oFirst = oUl.children[0];

                 if (oFirst) {

                     oFirst.style.background = 'red';

                 }

                 /**

                     获取最后一个子元素

                     obj.lastChild

                     标准浏览器下会取到文本节点

                     非标准浏览器下只会取到元素节点

                     obj.lastElementChild

                     标准浏览器下只会取到元素节点

                     非标准浏览器不认识该属性

                     var oLast = obj.lastElementChild || obj.lastChild;

                     if( oLast ){

                         oLast.style.background = '#abcdef';

                     }

                 */

                 var oLast = oUl.children[oUl.children.length-1];

                 if (oLast) {

                     oLast.style.background = '#abcdef'

                 }

                 /**

                     获取上一个兄弟节点

                     obj.previousSibling

                     标准浏览器下会取到文本节点

                     非标准浏览器下只会取到元素节点

                     obj.previousElementSibling

                     标准浏览器下只会取到元素节点

                     非标准浏览器不认识该属性

                     var oPrevious = obj.previousElementSibling || obj.previousSibling;

                     if( oPrevious ){

                         oPrevious.style.background = 'yellow';

                     }

                 */

                 var oPrevious = oLast.previousElementSibling || oLast.previousSibling;

                 if (oPrevious) {

                     oPrevious.style.background = 'yellow';

                 }

                 /**

                     获取下一个兄弟节点

                     nextSibling

                     标准浏览器可以获取文本节点

                     非标准浏览器只能获取元素节点

                     nextElementSibling

                     标准浏览器只能获取元素节点

                     非标准浏览器不支持该属性

                     var oNext = oFirst.nextElementSibling || oFirst.nextSibling;

                     if( oNext ){

                         oNext.style.background = 'pink';

                     }

                 */

                 var oNext = oFirst.nextElementSibling || oFirst.nextSibling;

                 if (oNext) {

                     oNext.style.background = 'pink';

                 }

             };

         </script>

     </body>

 </html>

firstChild,lastChild,nextSibling,previousSibling & 兼容性写法的更多相关文章

  1. 兼容的firstChild,lastChild,nextSibling,previousSibling写法

    在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...

  2. HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题

    <html> <head> <title>HTML示例</title> <style type="text/css"> ...

  3. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  4. css各浏览器的兼容性写法

    各浏览器下的兼容性写法 老版Chrome     -webkit-xxx FF                  -moz-xxx IE9                 -ms-xxx opera ...

  5. 常用原生JS兼容性写法汇总

    1.添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 elem ...

  6. Javascript selection的兼容性写法介绍

    本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...

  7. JavaScript数组方法的兼容性写法 汇总：indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  8. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  9. javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

    <a name="target" href="#">链接</a> <p id="target">文字说明 ...

随机推荐

  1. position relative

    position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于 ...

  2. extj6.0写增删查改（1）-------查询

    本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...

  3. Spring事务隔离级别与传播机制详解，spring+mybatis+atomikos实现分布式事务管理

    原创说明:本文为本人原创作品,绝非他处转载,转账请注明出处 1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). ...

  4. 规范模式-------From ABP Document

    介绍 规范模式是一种特定的软件设计模式,通过使用布尔逻辑 (维基百科)将业务规则链接在一起,可以重新组合业务规则. 在实际中,它主要用于 为实体或其他业务对象定义可重用的过滤器. 例 在本节中,我们将 ...

  5. java集合的核心知识

    1.    集合 1.1. 什么是集合 存储对象的容器,面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,存储对象,集合是存储对象最常用的一种方式. 集合的出现就是为了持有对象. ...

  6. 蓝桥杯-加法变乘法-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  7. python循环

    #!/usr/bin/python #coding:utf-8 lcf_age = "19" count = 0 while count < 3: c_lcf_age = i ...

  8. 思考一个关于Lambda表达式做为linq条件的问题

    有一个集合如下 List<User> users = new List<User> { new User{Name = "1",Aget = 12}, ne ...

  9. crontab的相关设置&linux定时备份数据库

    对于才了解crontab的人来说,应该按照以下的步骤来设置crontab 1.首先要检查是否装了crontab http://blog.sina.com.cn/s/blog_4881040d01011 ...

  10. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...