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

  • 不同点：

  • 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. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  2. **PCL：嵌入VTK/QT显示（Code^_^）

    中国人真是太不知道分享了,看看这个老外的博客,启发性链接. http://www.pcl-users.org/ 1. 这个是可用的源代码: 原文:I saw a thread with links t ...

  3. spring的四种数据源配置

     DriverManagerDataSource   spring自带的数据源,配置如下: <bean id="dataSource" class="org.spr ...

  4. spring注解略解

    @Scope("prototype") 如果ACTION中不@Scope("prototype"),有可能报找不到XXXACTION的错误!写上这个就表示每次请 ...

  5. MindManager 2019新版上市 ，了解一下！

    所有的等待都是值得的!MindManager在蓄力一年后,给各位思维导图爱好者带来了全新的MindManager 2019 for Windows.全新的版本包含英语.德语.法语.俄语.中文.日语,新 ...

  6. hibernate增删改查总结

    hibernate操作的都是基于对象的(曾save删delete改update) 进行hql查询是设置参数从零开始(session.setParameter(0,#)) hql查询设置参数可以是其他( ...

  7. C语言提高 (2) 第二天 用指针对字符串进行操作

    2 昨日回顾 p++: (把地址转换成整型 加上它所指向的数据的大小 3指针成立条件和间接赋值 条件一:有两个变量 其中至少一个是指针 条件二:建立关联 条件三:间接操作 4间接操作的例子 5间接操作 ...

  8. 实验二：编写输出"Hello World!"

    1.首先打开eclipse这个软件,新建Java项目,执行“文件→ 新建→Java项目 ”菜单命令,打开新建Java对话框,在项目名的编辑框中输入项目名编写输出"Hello World!”, ...

  9. 自动化测试之firebug、firepath、IDE的使用

    1firebug安装-firefox添加组件-firebug 如图 firepath依赖于firebug 展示路径用,安装和firebug一样

  10. IntelliJ IDEA 2017.1.6 x64 的破解

    方式一 现在用这个 http://idea.imsxm.com/好使 步骤如下,点击help按钮,选择Register 点击license server   修改下面的服务器激活地址 方式二 由于Je ...