在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. java学习笔记（2）：获取文件名和自定义文件过滤器

    //自定义文件过滤器import java.io.File; import javax.swing.filechooser.*; public class JavaChooser extends Fi ...

  2. Arduino101学习笔记（六）—— 高级IO

    1.位移输出函数(8位) 输入value数据后Arduino会自动把数据移动分配到8个并行输出端. 其中dataPin为连接DS的引脚号, clockPin为连接SH_CP的引脚号, bitOrder ...

  3. 基于XMPP协议的Android即时通信系

    以前做过一个基于XMPP协议的聊天社交软件,总结了一下.发出来. 设计基于开源的XMPP即时通信协议,采用C/S体系结构,通过GPRS无线网络用TCP协议连接到服务器,以架设开源的Openfn'e服务 ...

  4. sql 根据指定条件获取一个字段批量获取数据插入另外一张表字段中+MD5加密

    /****** Object: StoredProcedure [dbo].[getSplitValue] Script Date: 03/13/2014 13:58:12 ******/ SET A ...

  5. getTickCount()函数 VS GetTickCount()函数

    这俩函数看上去长得太像了,笔者曾经马大哈地把两者当成一个函数了(确实长得很像),知道有一天发现返回的值离预期值差很远差仔细查了下. 1. getTickCount() 实际上,该函数为opencv中的 ...

  6. C# 溢出检查

    checked: byte b = 255; checked { b++; } Console.WriteLine(b.ToString()); 执行出错:算术运算导致溢出. unchecked: b ...

  7. nefu558 bfs

    Description AC小公主很喜欢设计迷宫,她设计的迷宫只有两个口,一个入口,一个出口.但小公主有时候很调皮,她会让挑战者走不出迷宫.现在给你AC小公主的迷宫请你判断挑战者能否成功从出口走出迷宫 ...

  8. Editthiscookie

    Editthiscookie,联调,.s环境加cookie才能访问.laravel

  9. 学习使用MAC

    Mac:指苹果笔记本.台式机.分为:MacBook Air.MacBook Pro.iMac.Mac mini和Mac Pro.有时也指苹果电脑操作系统,分:雪豹.山狮.巨浪和优山美地. iOS:指苹 ...

  10. Fzu2109 Mountain Number 数位dp

    Accept: 189    Submit: 461Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description One ...