<!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

     </head>

     <body>

         <ul id="ul1">

             <li>0001</li>

             <li>0002</li>

             <li>0003</li>

             <li>0004</li>

         </ul>

         <script>

             window.onload = function() {

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

                 /**

                     获取第一个子元素

                     obj.firstChild

                     标准浏览器下会取到文本节点

                     非标准浏览器下只会取到元素节点

                     obj.firstElementChild

                     标准浏览器下只会取到元素节点

                     非标准浏览器不认识该属性

                     兼容代码

                     if(obj.firstElementChild){

                         obj.firstElementChild.style.background='red';

                     }else{

                         obj.firstChild.style.background='red';

                     }

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

                     if( oFirst ){

                         oFirst.style.background = 'red';

                     }

                     以上兼容代码都有BUG so 使用一下代码查找第一个子obj

                     obj.children[0].style.background = 'red';

                 */

                 var oFirst = oUl.children[0];

                 if (oFirst) {

                     oFirst.style.background = 'red';

                 }

                 /**

                     获取最后一个子元素

                     obj.lastChild

                     标准浏览器下会取到文本节点

                     非标准浏览器下只会取到元素节点

                     obj.lastElementChild

                     标准浏览器下只会取到元素节点

                     非标准浏览器不认识该属性

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

                     if( oLast ){

                         oLast.style.background = '#abcdef';

                     }

                 */

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

                 if (oLast) {

                     oLast.style.background = '#abcdef'

                 }

                 /**

                     获取上一个兄弟节点

                     obj.previousSibling

                     标准浏览器下会取到文本节点

                     非标准浏览器下只会取到元素节点

                     obj.previousElementSibling

                     标准浏览器下只会取到元素节点

                     非标准浏览器不认识该属性

                     var oPrevious = obj.previousElementSibling || obj.previousSibling;

                     if( oPrevious ){

                         oPrevious.style.background = 'yellow';

                     }

                 */

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

                 if (oPrevious) {

                     oPrevious.style.background = 'yellow';

                 }

                 /**

                     获取下一个兄弟节点

                     nextSibling

                     标准浏览器可以获取文本节点

                     非标准浏览器只能获取元素节点

                     nextElementSibling

                     标准浏览器只能获取元素节点

                     非标准浏览器不支持该属性

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

                     if( oNext ){

                         oNext.style.background = 'pink';

                     }

                 */

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

                 if (oNext) {

                     oNext.style.background = 'pink';

                 }

             };

         </script>

     </body>

 </html>

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

  1. 兼容的firstChild,lastChild,nextSibling,previousSibling写法

    在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下,由于它会把标签之间的空格当成文本节点,所以为了准确地找到相应的元素,会用 ...

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

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

  3. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  4. css各浏览器的兼容性写法

    各浏览器下的兼容性写法 老版Chrome     -webkit-xxx FF                  -moz-xxx IE9                 -ms-xxx opera ...

  5. 常用原生JS兼容性写法汇总

    1.添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 elem ...

  6. Javascript selection的兼容性写法介绍

    本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...

  7. JavaScript数组方法的兼容性写法 汇总：indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  8. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  9. javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

    <a name="target" href="#">链接</a> <p id="target">文字说明 ...

随机推荐

  1. js中字符串转换为日期型

    简介:字符串转日期型函数 传入一个字符串格式的日期,如何转换为日期型的.以下为转换方案. //字符串转换为日期函数,返回日期型(传入的日期格式2014-04-22) function StringTo ...

  2. C#邮件发送开发经本人测试通过

    先准备以下工作 1.先开通邮箱我以QQ邮箱为例 2.开通 POP3/SMTP服务 (如何使用 Foxmail 等软件收发邮件?) 已开启 |  关闭 获取授权码 3.C#开发了先写一个CS文件 pub ...

  3. 如何给远程主机开启mysql远程登录权限

    # 如何给远程主机开启mysql远程登录权限 > 在千锋学习PHP的有些学员会在阿里或者腾讯云去购买自己的云服务器.在初级阶段的项目上线时会遇到一个问题,就是无法使用远程连接工具操作自己线上的m ...

  4. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

  5. selenium + python 登录页面，输入账号、密码，元素定位问题

    示例简介: 要求:登录QQ邮箱,输入账号.密码 出现问题:页面中含有iframe框架,因此直接进行元素的查找与操作,出现找不到元素的现象,首先需进行iframe框架的转换,使用switch_to_fr ...

  6. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  7. 关于在"a"标签中添加点击事件的一些问题

    昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate() ...

  8. 最准确的单点登录SSO图示和讲解（有代码范例）|手把手教做单点登录（SSO）系列之二

    写第一篇博客<手把手教做单点登录(SSO)系列之一:概述与示例>,就获得了园子里朋友们热情的评论和推荐,感谢各位. 我那篇文章同时发了CSDN和博客园.对比一下,更感受到博客园童鞋们的技术 ...

  9. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  10. MySQL对innodb某一个表进行移动

    (步骤:建表, 禁用表空间,复制表空间,重用表空间)   mysql> desc test; +-------+-------------+------+-----+---------+---- ...