1、childNodes:获取节点,不同浏览器表现不同;
  IE:只获取元素节点;
  非IE:获取元素节点与文本节点;
  解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

2、children:获取元素节点,浏览器表现相同。
因此建议使用children。

childNodes返回的是节点的子节点集合,包括元素节点、文本节点还有属性节点。
children返回的只是节点的元素节点集合,所以返回的只有span元素。

3、firstChild与firstElementChild
  相同点:获取父节点下的第一个节点对象;
  不同点:1、firstchild:IE6,7,8:第一个元素节点;
      非IE6,7,8:第一个节点,文本节点或者元素节点;
      2、firstElementChild:IE6,7,8:不支持;
          非IE6,7,8:第一个元素节点;
function firstChild(obj){
if(obj.firstElementChild) return obj.firstElementChild;
return obj.firstChild
}
4、lastChild与lastElementChild
  相同点:获取父节点下的最后一个节点对象;
  不同点:1、lastchild:IE6,7,8:最后一个元素节点;
     非IE6,7,8:最后一个节点,文本节点或者元素节点;
     2、lastElementChild:IE6,7,8:不支持;
     非IE6,7,8:最后一个元素节点;

5、nextSibling与nextElementSibling
  相同点:获取后一个兄弟节点对象;
  不同点:1、nextSibling:IE6,7,8:后一个兄弟元素节点;
      非IE6,7,8:后一个兄弟节点,文本节点或者元素节点;
      2、lastElementChild:IE6,7,8:不支持;
      非IE6,7,8:后一个兄弟元素节点;

6、previousSibling与previousElementSibling
  相同点:获取前一个兄弟节点对象;
  不同点:1、previousSibling:IE6,7,8:前一个兄弟元素节点;
      非IE6,7,8:前一个兄弟节点,文本节点或者元素节点;
      2、previousElementChild:IE6,7,8:不支持;
      非IE6,7,8:前一个兄弟元素节点;

7、parentNode:获取父元素,不存在兼容性问题。

JS获取DOM元素的更多相关文章

  1. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  4. js获取dom元素的子元素,父元素,兄弟元素小记

    原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...

  5. [原]js获取dom元素的实际位置及相对坐标

    关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/ ...

  6. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  8. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  9. document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

    想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName, ...

随机推荐

  1. IIS 500错误或无法显示此网页解决方法

    不知道是不是XP版本的原故,发现越来越多的XP系统装好IIS后连默认网站都打不开,(其他系统没有注意)出现几个大字,IIS 500错误.相信碰到这个问题的人都深有体会,确实很烦人.卸了IIS重装也是不 ...

  2. 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)

    做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...

  3. Mysql安装后打开MySQL Command Line Client闪退解决方法

    1.开始菜单下;Mysql--->mysql server 5.6-->mysql command line Client ---右击,选择属性 2.在属性下查看目标位置: 3.将安装目录 ...

  4. Jquery qTip2实现多种提示效果,支持ajax,以及多种样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. cocos2dx - v2.3.3编辑器骨骼动画

    接上一节内容:cocos2dx - v2.3.3编辑器简单使用及不同分辨率适配 本节主要Cocos骨骼动画的创建及使用 一.新建 用Cocos Studio工具新建一个状态栏项目.如下图: 当然也可以 ...

  6. PE格式第六讲,导出表

    PE格式第六讲,导出表 请注意,下方字数比较多,其实结构挺简单,但是你如果把博客内容弄明白了,对你受益匪浅,千万不要看到字数多就懵了,其实字数多代表它重要.特别是第五步, 各种表中之间的关系. 作者: ...

  7. Hadoop2.7.3集群搭建

    hadoop2.0已经发布了稳定版本了,增加了很多特性,比如HDFS HA.YARN等.最新的hadoop-2.4.1又增加了YARN HA   注意:apache提供的hadoop-2.4.1的安装 ...

  8. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  9. oracle 表空间不足解决办法

    问题:在对某一表空间进行新建表的时候,出现ora-01658的错误. create 语句: create table OA_ORGCONFIG(  OAOC_UNID      INTEGER not ...

  10. 入侵必练的CMD命令

    入侵必练的CMD命令 我们都知道和目标主机建立IPC$连接后,要把后门,木马之类的软件传过去,其实这个命令是DOS基础的 命令,我这里就写个格式. 一.呵呵,命令一写就知道了吧,在网上看的太多了,其他 ...