• 相同点： 都是获取父元素下的第一个节点对象

  • 不同点：

  • firstChild: IE6、7、8 第一个元素节点; 非IE6、7、8：返回第一个元素节点或文本节点

  • firstElementChild： IE6、7、8不支持；非IE6、7、8，获取第一个元素节点

<script type="text/javascript">

	/**

	* @description: 获取父元素的第一个节点

        * @param ele: 传入一个DOM元素

	* */

	function firstChild(ele) {

		if(ele.nodeType) { // 存在nodeType属性，传进来的就是DOM元素

			if(ele.firstElementChild) { // 非IE

				return ele.firstElementChild;

			}

			return ele.firstChild; // IE

		} else {

			throw new Error("您传入的参数不是DOM元素！！！");

		}

	}

	window.onload = function() {

		var box = document.getElementById("box");

		console.log(firstChild(box));// 不管什么浏览器永远返回1--也就是第一个元素节点，而非文本节点

		console.log(box.firstChild.nodeType);// chrome下返回3

	}

</script>

<body>

	<div id="box"> q

		<span>1</span>

		<span>2</span>

		<a href="">3</a>

	</div>

</body>

lastChild与lastElementChild

　　相同点：获取父节点下的最后一个节点对象；

　　不同点：1、lastchild：IE6,7,8：最后一个元素节点；

　　　　　　　　　　　　 非IE6,7,8：最后一个节点，文本节点或者元素节点；

　　　　　　2、lastElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　非IE6,7,8：最后一个元素节点

nextSibling与nextElementChild

    - 相同点：获取后一个兄弟节点对象；

　　- 不同点：1、nextSibling：IE6,7,8：后一个兄弟元素节点；

　　　　　　　　　　　　 非IE6,7,8：后一个兄弟节点，文本节点或者元素节点；

　　　　　　2、lastElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　　　　　 非IE6,7,8：后一个兄弟元素节点；

previousSibling与previousElementChild

　　- 相同点：获取前一个兄弟节点对象；

　　-不同点：1、previousSibling：IE6,7,8：前一个兄弟元素节点；

　　　　　　　　　　　　 非IE6,7,8：前一个兄弟节点，文本节点或者元素节点；

　　　　　　2、previousElementChild：IE6,7,8：不支持；

　　　　　　　　　　　　　非IE6,7,8：前一个兄弟元素节点；

parentNode：获取父元素，不存在兼容性问题。

  • offsetParent：获取第一个设置定位的父元素；
  • offsetLeft：获取离第一个定位父元素的左距离；

    -offsetTop：获取离第一个定位父元素的上距离；

firstChild与firstElementChild的更多相关文章

  1. 兼容firstChild和firstElementChild

    1.nextSibling和nextElementSibling 顾名思义,就是找下一个节点 nextSibling在低版本浏览器中可以顺利找到下一个元素节点,而在正常浏览器中找到的包含中间空格. n ...

  2. 05.DOM

    DOM基础 什么是DOM 标签元素节点浏览器支持情况  火狐支持最好 谷歌其次 ie最差 尤其是ie6-8DOM节点节点分为:元素节点和文本节点 测试节点的类型用nodeTypenodeType 为3 ...

  3. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  4. Dom初

    DOM基础 •什么是DOM •浏览器支持情况 lDOM节点 •childNodes  nodeType –获取子节点 <!DOCTYPE html PUBLIC "-//W3C//DT ...

  5. util.js

    轻量基础库.方法库 用时可直接拷贝 拆卸式使用 适用于mobile端简单页面 适用于PC简单页面 基于node.php等多种构建方法 (function(M){ /** * 初始化Ajax请求 * @ ...

  6. DOM兼容

    -firstChild  firstElementChild var oFirst = oUl.firstChild || oUl.firstElementChild; -lastChild   la ...

  7. DOM节点关系,节点关系

    DOM节点关系 定义 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同, ...

  8. DOM应用

    父级.removeChild(子节点);父级.appendChild(子节点);父级.insertBefore(子节点, 在谁之前); 创建元素: <script> window.onlo ...

  9. DOM基础之“寻找”子节点

    今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...

随机推荐

  1. RabbitMQ学习之messageconver插件实现(Gson)

    RabbitMQ已经实现了Jackson的消息转换(Jackson2JsonMessageConverter),由于考虑到效率,如下使用Gson实现消息转换. 如下消息的转换类的接口MessageCo ...

  2. SweetAlert详解

    官方给出的SweetAlert介绍是:SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题. ...

  3. 【转】【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍（一）

    原文地址:http://www.cnblogs.com/baiboy/p/orc1.html 阅读目录 目录 集群概念介绍 什么是集群 为什么搭建数据库集群 数据库集群的分类 可扩展的分布式数据库架构 ...

  4. Java Mybatis 缓存介绍

    0 引言 本文主要介绍有关MyBatis的缓存. 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 1. 一级缓存: 基于PerpetualCache 的 HashMap本 ...

  5. C#学习 第九节

    构造器 1.构造器(constructor)是类型的成员之一: 2.狭义的构造器是指“实例构造器”(instance constructor): 3.构造器的调用 student stu =new s ...

  6. IOS - Ask for Application Badge permission ios8

    UIUserNotificationSettings* notificationSettings = [UIUserNotificationSettings settingsForTypes:UIUs ...

  7. [模板]Link-Cut-Tree

    LCT模板. Orz了一下大佬的板子 Orz UPD(10.19):好像理解LCT了... LCT相当与把一个树剖分,分成实边和虚边,对于每一个实链用一个splay维护一下它的深度,然后当你想进行操作 ...

  8. PHP学习总结（1）——PHP入门篇之PHP可以做什么？

    为什么要学习PHP?"我可以用JavaScript来实现程序编写."但JavaScript的能力是有限的,JavaScript通常运行在浏览器(客户端),它可以制作网页上面的特效: ...

  9. springboot配置容器

    servlet容器配置 Spring Boot快速的原因除了自动配置外,另一个就是将web常用的容器也集成进来并做自动配置,让使用它的人能更快速的搭建web项目,快速的实现自己的业务目的.什么是容器? ...

  10. Android网络编程（十）Retrofit2后篇[注解]

    G相关文章 Android网络编程(一)HTTP协议原理 Android网络编程(二)HttpClient与HttpURLConnection Android网络编程(三)Volley用法全解析 An ...