<!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. Java中常用来处理时间的三个类:Date、Calendar、SimpleDateFormate，以及Java中的单例设计模式：懒汉式、饿汉式以及静态内部类式

    (一)java.util.Date类 1.该类有一个long类型的属性:用来存放时间,是用毫秒数的形式表示,开始的日期是从1970年1月1号 00:00:00.    2.该类的很多方法都已经过时,不 ...

  2. How to trace the Geolocation of network traffic

    A case about suspicious malware App. A forensic examiner capatured some pcap files and he'd to know ...

  3. ssh相关命令

    ssh命令 ssh命令是openssh套件中的客户端连接工具,可以给予ssh加密协议实现安全的远程登录服务器. 语法ssh(选项)(参数)选项 -1:强制使用ssh协议版本1: -2:强制使用ssh协 ...

  4. C#图解教程-方法参数笔记（上）

    一晃大学四年要过去了,期间乱点了很多技能点, 导致每一项技能都只是处于入门阶段.为了将C#作为我的主要技能,准备恶补相关姿势(知识),通过各种技术论坛的推荐,找到了<C#图解教程>这本书. ...

  5. less的基本操作

    less的四大特性及示例 1.特性一(变量) less写法 @color:#ffffff: body{background-color:@color:} 生成的css body{background- ...

  6. Hibernate启动非常慢问题分析

    项目中使用hibernate3,在启动项目过程中,发现加载显示数据很慢,要多几分钟才显示出数据,没有报其他异常.今天特别慢,过了好久都不加载显示数据. 排查思路有以下几个方面: 1.数据库是否开启.检 ...

  7. 何为代理？jdk动态代理与cglib代理、spring Aop代理原理浅析

    原创声明:本博客来源为本人原创作品,绝非他处摘取,转摘请联系博主 代理(proxy)的定义:为某对象提供代理服务,拥有操作代理对象的功能,在某些情况下,当客户不想或者不能直接引用另一个对象,而代理对象 ...

  8. linux 基础（1）

    第一章 Linux 基础知识(一) 一.硬件介绍: 由一条总线把CPU.内存和I/O设备串联起来并与其他设备进行通信.CPU负责运算,内存用于储存临时变量,硬盘用于储存数据.1.1处理器CPU 从内存 ...

  9. openresty源码剖析——lua代码的加载

    ##Openresty是什么 OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,通过把lua嵌入到Nginx中,使得我们可以用轻巧的lua语言进行nginx的相关开发,处理 ...

  10. UPYUN云服务体验计划，阅读神器Kindle、LaCie移动硬盘、索尼大法充电宝、高大上极路由、UPYUN代金券等你拿！

    请看以下的“通关攻略”,分享你对云服务的“体验心得”,即可赢取绝佳的“通关宝藏”,阅读神器Kindle.LaCie移动硬盘.索尼大法充电宝.高大上极路由.UPYUN代金券等你拿!先来了解下UPYUN能 ...