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

  • 不同点：

  • 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. vs2012下 error4996

    原文链接:http://blog.csdn.net/xidianzhimeng/article/details/11457045 分类: VS使用学习 2013-09-09 08:37 24人阅读 评 ...

  2. 检索源码 删除无用Properties的小工具

    背景: 重新做项目的过程中,引用了大量旧代码.尤其是Properties文件,里面肯定有一批是无用的,干脆笨办法直接扫描源码文件来过滤. 后续在此基础上修改修改,再做个扫描无用image文件的类. 代 ...

  3. C# 遍历对象下的 属性

    foreach (System.Reflection.PropertyInfo p in users.GetType().GetProperties()) { var xx = p.Name; var ...

  4. 企业级任务调度框架Quartz(8) 线程在Quartz里的意义（2）

    前序:      做为企业里的任务调度框架,出现同一时间点同时运行两个任务,或者两个任务因为开始的执行时间和执行时间的长短,很有可能出现任务并发执行的情况:因为Quartz的实现是采用java编程,那 ...

  5. Python之进程 进阶 下

    在python程序中的进程操作 之前我们已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,刚刚我们已经了解了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创建的.因此,运行起 ...

  6. 初步使用vue中axios

    1.下载axios npm install axios --save 2.两种方式使用axios (1)在模块中引入axios 例如:我在用户登陆界面需要使用axios,就在login页面引入,不是全 ...

  7. 嵌入式 ThriftServer in Spark

    我们知道在Spark中可以通过start-thriftServer.sh 来启动ThriftServer,之后并可以通过beeline或者JDBC来连接并执行Spark SQL.在一般的Spark应用 ...

  8. Python笔记22-----高阶函数

    1.sorted(排序对象,key=):排序对象可以是类别,也可以是字符串和字典,key为自定义排序,如:[key=abs,按绝对值排序][key=lambda x:x[1],按排序对象的第二个值排序 ...

  9. BZOJ 3878 [AHOI&JSOI2014]奇怪的计算器 (线段树)

    题面:BZOJ传送门 洛谷传送门 线段树好题 题目保证$a$一定是正整数,容易发现计算结果是单调的 我们把询问离线,并按照从小到大排序 某次操作可能导致某些位置达到边界$L/R$ 根据单调性的结论 这 ...

  10. Python编程：从入门到实践 - matplotlib篇 - Random Walk

    随机漫步 # random_walk.py 随机漫步 from random import choice class RandomWalk(): """一个生成随机漫步数 ...