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

  • 不同点：

  • 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. 决策树构建算法之—C4.5

    这个网站值得收藏一下,原文链接:http://shiyanjun.cn/archives/428.html 决策树算法的优越性在于:离散学习算法进行组合总可以表达任意复杂的布尔函数,并不受数据集的限制 ...

  2. 图像压缩Vs.压缩感知

    压缩感知科普文两则: 原文链接:http://www.cvchina.info/2010/06/08/compressed-sensing-2/ 这几天由于happyharry的辛勤劳动,大伙纷纷表示 ...

  3. CorelDRAW X6、X7&2018，500现金返利等你拿！

    购物狂欢节要来了,你准备好了么? 不知何时起,四根神棍的日子却成了大家拼爹.拼钱包.拼手速.拼网速.拼钱包...各种火拼日子 你是从哪年关注并重视双11的,记得小编我第一次邂逅双11真的只是凑凑热闹 ...

  4. Eclipse 中的 Bulid Path

    什么是Build Path? Build Path是指定Java工程所包含的资源属性集合. 在一个成熟的Java工程中,不仅仅有自己编写的源代码,还需要引用系统运行库(JRE).第三方的功能扩展库.工 ...

  5. java 1.8 内存告警问题

    Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=512m; support was removed in 8.0 ...

  6. 关于MySQL日期操作函数 date_formate 的使用

    基本语法:DATE_FORMAT(date,format)说明:date 参数是合法的日期.format 规定日期/时间的输出格式.可以用的格式主要有格式 描述%a 缩写星期名%b 缩写月名%c 月, ...

  7. twemproxy 安装与配置

    转自:http://blog.csdn.net/u011183653/article/details/21240749 说到twemproxy就不得不说要一下redis,这是因为twemproxy是为 ...

  8. 2019-03-25 SQL SET ANSI_NULLS /SET QUOTED_IDENTIFIER /SET NOCOUNT ON

    use database go /**当 SET ANSI_NULLS 为 ON 时,即使 column_name 中包含空值,使用 WHERE column_name = NULL 的 SELECT ...

  9. 关于mvc架构的浅谈

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  10. SpringBoot 国际化

    一.配置文件 二.application.properties 文件( 让国际化的文件被 SpringBoot 识别 ) spring.messages.basename=i18n.login 三.h ...