在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. 用PowerShell脚本实现对SharePoint页面Title的修改

    存在这样一种情况,对应的page已经部署到product的SharePoint环境中,那么在部署下一个版本的时候就不允许把已经创建好的page删除再创建,因此page中修改过的属性就不能再次部署到Sh ...

  2. HDU 5213 Lucky 莫队+容斥

    Lucky Problem Description WLD is always very lucky.His secret is a lucky number K.k is a fixed odd n ...

  3. Activity活动

    自定义一个类继承Activity类后结构已经很好了 提供了finish()来销毁活动 要记得注册

  4. Linux学习笔记（10）文本编辑器vim

    vim是一个功能强大的全屏幕文本编辑器,是Linux/Unix最常用的文本编辑器,其作用是建立.编辑.显示文本文件.vim的特点是没有菜单,只有命令. vim主要有三种工作模式,分别为命令模式.插入模 ...

  5. MIT 6.828 JOS学习笔记2. Lab 1 Part 1.2: PC bootstrap

    Lab 1 Part 1: PC bootstrap 我们继续~ PC机的物理地址空间 这一节我们将深入的探究到底PC是如何启动的.首先我们看一下通常一个PC的物理地址空间是如何布局的:        ...

  6. C# 键值对类相关

    一 C# 键值对类有以下类: ①    IDictionary<string, Object> idc = new Dictionary<string, object>(); ...

  7. SpringJDBC解析4-query方法

    重要步骤说明: 首先是从PersonServiceImpl方法进去,调用JdbcTemplate的query方法,然后执行一连串错中复杂的调用,而且里面有很多函数都是以回调形式处理, 1)JdbcTe ...

  8. POJ 1226 后缀数组

    题目链接:http://poj.org/problem?id=1226 题意:给定n个字符串[只含大小写字母],求一个字符串要求在n个串或者他们翻转后的串的出现过.输出满足要求的字符串的长度 思路:根 ...

  9. Console.log，Window.alert，Document.write三者区别

    1.Console.log不会阻断程序继续进行,在控制台可以看到测试结果. 2.Window.alert弹出框会阻断程序运行,在弹出框可以看到测试结果. 3.Document.write不会阻断程序继 ...

  10. 一个java集合使用bug

    在使用java集合的时候有的时候集合是来自于一些第三方工具提供的从字符串或json 转出集合的对象有时是抽象类,这时的对象部分功能是未实现的,在使用相应操作的时侯 会引发bug. Exception  ...