在IE下是支持firstChild,lastChild,nextSibling,previousSibling

但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用

firstElementChild,

lastElementChild,

nextElementSibling,

previousElementSibling

兼容的写法是这样的

var oFirst = oParent.firstElementChild||oParent.firstChild                                    
也可以这么写      
var  oFirst = oParent.children[0];

var oLast = oParent.lastElementChild||oParent.lastChild                                   
也可以这么写       
var  oLast = oParent.children[oParent.children.length-1];

var oNext = obj.nextElementSibling||obj.nextSibling

var oPre = obj.previousElementSibling||obj.previousSibling

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

window.onload = function() {

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

        /*

        元素.lastChild || 元素.lastElementChild 第一个子节点

        元素.lastChild || 元素.lastElementChild 最后一个子节点

        元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点

        元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点

    */

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

    //var  oFirst = oUl.children[0];

    oFirst.style.background = 'red';

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

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

    oLast.style.background = 'yellow';

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

    oNext.style.background = 'blue';

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

    oPrev.style.background = 'orange';

}

</script>

</head>

<body>

<ul id="ul1">

        <li>11111</li>

        <li>22222</li>

        <li>33333</li>

        <li>44444</li>

    </ul></body>

</html>

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

  1. firstChild,lastChild,nextSibling,previousSibling & 兼容性写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  3. JS中firstChild,lastChild,nodeValue属性

    childNodes 在JavaScript中,使用childNodes属性可以返回一个数组,这个数组包含给定元素节点的全体子节点. firstChild firstChild 这句代码等价于 目标元 ...

  4. 一个兼容 node 与浏览器的模块写法

    一个兼容 node 与浏览器的模块写法 // test.js (function (root, factory) { if (typeof define === 'function' &&am ...

  5. nth-child,nth-last-child,after,before,tab-highlight-color,first-child,last-child

    nth-child:定义第几个元素或者是奇数或者是偶数,或者满足某个数字倍数的dom的样式 如 li:nth-child(3n),结果如下,li:nth-child(2)结果如下

  6. js firstChild 、nextSibling、lastChild、previousSibling、parentNode

    nextSibling下一个兄弟节点 previousSibling上一个兄弟 parentNode父亲节点 <select><option value="zs" ...

  7. nth-child,nth-last-child，only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法

    我将这坨伪类分成三组,第一组:nth-child,nth-last-child,only-child第二组:nth-of-type,nth-last-of-type,第三组:first-of-tpye ...

  8. 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...

  9. [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

    DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...

随机推荐

  1. HDU 5875 Function st + 二分

    Function Problem Description   The shorter, the simpler. With this problem, you should be convinced ...

  2. 几个CSS3动画

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Android 实现ListView中Item被单击后背景色保持高亮

    今天为了解决一个需求,就是我有一个slidingDrawer,里面是一个ListView.然后,单击其中的Item,默认只是显示一个橙色背景后就恢复了.客户便有着个需求,需要单击这个Item的背景高亮 ...

  4. MIT 6.828 JOS学习笔记0. 写在前面的话

    0. 简介 操作系统是计算机科学中十分重要的一门基础学科,是一名计算机专业毕业生必须要具备的基础知识.但是在学习这门课时,如果仅仅把目光停留在课本上一些关于操作系统概念上的叙述,并不能对操作系统有着深 ...

  5. 03 Javascript初识

    Javascript语言(★★★★★)      Javascript是基于对象和事件驱动的脚本语言,作用在客户端.              特点: * 交互性 * 安全性(不能访问本地的硬盘)   ...

  6. CSS3-margin，padding，border

    margin  padding  border: 1.当属性值为0的时候,不需要在后面添加单位 2.当同时出现top margin以及bottom magin的时候,浏览器应用较大的哪一个 3.不能在 ...

  7. HDU5812 Distance（枚举 + 分解因子）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5812 Description In number theory, a prime is a ...

  8. angularjs学习资料

    API http://www.yiibai.com/angularjs/angularjs_scopes.html 视频 http://v.youku.com/v_show/id_XNjQ3MjA1N ...

  9. 【原】iOS学习之PCH文件

    1. PCH文件概述 PCH文件是一种预编译头文件(一般扩展名为.PCH),是把一个工程中较稳定的代码预先编译好放在一个文件(.PCH)里.这些预先编译好的代码可以是任何的C/C++代码--甚至可以是 ...

  10. [R]R下as.Date()函数的坑

    问题描述: 在本地使用as.Date()函数从POSIXct类型中提取date时,出现了日期不一致的错误.导致处理数据时,总是出问题. 还好被领导发现数据有误,不然这个bug不知道还要潜伏多久.尽管如 ...