在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. async4j 普通用法、整合spring用法

    1.普通用法 asyn4j 是一个java异步方法调用框架,基于消费者与生产者模式. async4j就是基于Executors线程池和反射机制实现的. 包括了异步方法执行,异步回调执行,异步工作缓存模 ...

  2. PHPExcel设置数据格式的几种方法

    转自:http://www.cnblogs.com/guangxiaoluo/archive/2013/11/19/3431846.html 解决 PHPExcel 长数字串显示为科学计数 在exce ...

  3. html php 重定向 跳转 刷新

    1秒后跳转 法一: <!DOCTYPE HTML> <html> <head>     <meta http-equiv="refresh" ...

  4. JavaScript设计模式——前奏

    Function.prototype.method = function(name,fn){ this.prototype[name] = fn; } var Anim = function(){ / ...

  5. 黑客语（Leet）

    黑客语(Leet)   Leet是从网络发展起来的一种文字书写方式.通常将英语中的字母替换为数字和特殊符号.这种方式被很多黑客组织所使用.由于具有隐密性,所以它也广泛被用于密码中.使用Leet书写的密 ...

  6. Asp.net mvc 有关序列化的问题

    //            $.ajax({//                async: false,//                type:'post',//这里注意,Get请求不安全,用 ...

  7. 【面经】【转】C程序的内存布局

    一个C语言程序一直以来都是由以下5个段组成: 1.代码段(text segmrnt):存放CPU执行的机器指令,通常情况下,代码段是可共享的,使其可共享的目的是对于频繁被执行的程序,只需要在没存中有有 ...

  8. [转] Spring MVC sample application for downloading files

    http://www.codejava.net/frameworks/spring/spring-mvc-sample-application-for-downloading-files n this ...

  9. iOS App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.

    You can easily add it to the plist using the GUI: On the last line add the + Enter the name of the g ...

  10. 科技部专家王涌天：移动AR头显将“让人类重新站起来”

    目前,业内普遍认为VR和AR技术将是继移动手机之后的下一代计算平台,将给社会的方方面面带来全新的改变.近日,北京理工大学信息与电子学部主任.科技部863信息技术领域专家组成员王涌天教授对头戴式增强现实 ...