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

  • 不同点：

  • 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. window窗口操作

    打开新窗口 window.open([url],[窗口名称],[参数字符串]) window.open("http://baidu.com","_balnk", ...

  2. C# html代码生成word

    首先引入 Microsoft.Office.Interop.Word 其次要先说一下,把一大段html代码直接变成word文件,只能生成doc文件,docx文件应该是不行的 首先我们用IO生成一个do ...

  3. 别再问我ConcurrentHashMap了

    以下ConcurrentHashMap以jdk8中为例进行分析,ConcurrentHashMap是一个线程安全.基于数组+链表(或者红黑树)的kv容器,主要特性如下: 线程安全,数组中单个slot元 ...

  4. js判断当前移动设备平台

    //js判断当前移动设备平台 var isiOs = false; var isAndroid = false; var isWindowsPhone = false; if(/(iPhone|iPa ...

  5. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  6. eclipse debug的时候提示debug Edit Source Lookup path

    原因可能是代码资源包未加载到debug的路径中,解决方法如下: Debug 视图下 ->在调试的线程上 右键单击 ->选择Edit Source Lookup Path ->选择Ad ...

  7. indy10中idtcpclient的使用问题[和大华电子称数据交换]

    在实际事务应用中,多次打开server进行大写.其中遇到一些问题,由于时间关系,没有好好整理,虽然问题解决了, 但原因和其他方法没有去进一步测试. 1.每个单元用本地TidTCPClient变量连接s ...

  8. Centos7 下安装 Docker

    一.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术:Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去,其他使用者可以直接使用这个镜像:运行中的这个镜 ...

  9. 16 个 Linux 服务器监控命令

    如果你想知道你的服务器正在做干什么,你就需要了解一些基本的命令,一旦你精通了这些命令,那你就是一个 专业的 Linux 系统管理员. 有些 Linux 发行版会提供 GUI 程序来进行系统的监控,例如 ...

  10. [HTML5] aria-label & aria-labelledby

    'aria-labelledby' overwrite 'aria-label' overwirte native element label. TOP-LEFT: aria-label overwr ...