在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. pythonchallenge之C++学习篇-03

    提示说一个小写字母两面精确地被大写字母包围,应该指的是周围没有四个而仅仅这两个像这样的:xXXXxXXXx的中间的那个应该是符合条件的 好了标题是re,提示该是使用正则表达式,网页源码里有待处理的字符 ...

  2. Linux学习笔记(22) Linux启动管理

    1. 系统运行级别 运行级别 含义 关机 1 单用户模式,可想象为windows的安全模式,主要用于系统修复 2 不完全的命令行模式,不含NFS服务 完全的命令行模式,就是标准字符界面 4 系统保留 ...

  3. Linux学习笔记(18) Shell编程之流程控制

    1. if语句 (1) 单分支if条件语句 格式为: # 注意条件判断式两端的空格if [ 条件判断式 ];then 程序员 fi 或者 if[ 条件判断式 ] then 程序 fi 例:判断分区使用 ...

  4. supervisor(三)xml_rpc

    supervisor提供的两种管理方式,supervisorctl和web其实都是通过xml_rpc来实现的. xml_rpc其实就是本地可以去调用远端的函数方法,然后函数方法经过一番处理后,把结果返 ...

  5. 各种编码问题产生原因以及解决办法---------响应编码，请求编码，URL编码

     响应编码 产生原因以及解决办法: 示例: package cn.yzu; import java.io.IOException; import javax.servlet.ServletExcept ...

  6. 【MyEcplise hibernate tools】hibernate tools的使用以及错误

    1.点击Myecplise右上角 2.点击进入后,在这个区域右键 New 一个新的connection 3.以mySql连接为例子,在这里展示一下,下面这几项必须都要按照要求完全一致,除了架包所在的本 ...

  7. 如何通过java代码对kylin进行cube build

    通常是用于增量 代码如下: package com.dlht.kylinDemo; import java.io.BufferedReader; import java.io.FileNotFound ...

  8. WebApi多数据库切换

    用抽象工厂来解决多数据库之间的切换问题是普遍的,像以下几篇文章都讲的很具体 申明之前写的存在强大漏洞 -- 之前有涉及到IoC Autofac的知识点,鄙人孤陋寡闻,在亲身实践后才发现其中奥妙可参照一 ...

  9. ++i与i++的区别

    1. ++i 和 i++,在单独使用时,就是 i=i+1. 2. a = ++i,相当于 i=i+1; a = i; (先i = i + 1,再使用i的值).也可以写成 i++; a=i 3. a = ...

  10. Codeforces Round #375 (Div. 2) - B

    题目链接:http://codeforces.com/contest/723/problem/B 题意:给定一个字符串.只包含_,大小写字母,左右括号(保证不会出现括号里面套括号的情况),_分隔开单词 ...