<!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. 为已有表快速创建自动分区和Long类型like 的方法-Oracle 11G

    对上一篇文章进行实际的运用.在工作中遇到有一张大表(五千万条数据),在开始的时候忘记了创建自动分区,导致现在使用非常不方便,查询的速度非常的满,所以就准备重新的分区表,最原始方法是先创建新的分区表,然 ...

  2. shell脚本基本知识点

    Shell 是一个用C语言编写的程序,它是用户使用Linux的桥梁.用户通过这个界面访问Linux操作系统内核的服务.Shell既是一种命令语言,又是一种程序设计语言. 1.Shell 环境 Shel ...

  3. Hadoop之HDFS原理及文件上传下载源码分析(上)

    HDFS原理 首先说明下,hadoop的各种搭建方式不再介绍,相信各位玩hadoop的同学随便都能搭出来. 楼主的环境: 操作系统:Ubuntu 15.10 hadoop版本:2.7.3 HA:否(随 ...

  4. es5和es6实现lazyman

    es6实现 1 class _LazyMan { constructor(name) { this.tasks = []; this.sleep = this.sleep.bind(this); th ...

  5. nginx源码编译问题

    [root@localhost nginx-1.7.4]# ./configure checking for OS + Linux 2.6.32-431.el6.x86_64 x86_64 check ...

  6. centos7安装redis3.0和phpredis扩展详细教程(图文)

    整理一下centos7安装redis3.0和phpredis扩展的过程,有需要的朋友可以拿去使用. 一.安装redis3.0 1.安装必要的包 yum install gcc 2.centos7安装r ...

  7. Laravel 5.2 教程 - 邮件

    一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...

  8. MarkDown本地图片上传工具制作总结

    引言:开始尝试使用MarkDown语法写文档,发现图片必须用外链的形式才能插入到文章中,而自己平时最常用的插入图片方式就是QQ截屏,觉得很不方便所以制作的小工具辅助上传,因为时间和水平有限,其实代码写 ...

  9. NSString类

    创建一个字符串 ) NSString *s = @"aaaa"; ) NSString *s1=[NSString new]; s1=@"bbb"; )格式化创 ...

  10. Potato(邪恶土豆)–windows全版本猥琐提权

    工作原理: Potato利用已知的Windows中的问题,以获得本地权限提升,即NTLM中继(特别是基于HTTP > SMB中继)和NBNS欺骗.使用下面介绍的技术,它有可能为一个非特权用户获得 ...