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. Ubuntu 16.04 源码编译安装PHP7

    一.下载PHP7的最新版源码 php7.0.9  下载地址 http://php.net/get/php-7.0.9.tar.gz/from/a/mirror 二.解压 tar -zxf /tmp/p ...

  2. PHP 两张图片合成一张图片(加水印)

    $dst_im = 'http://www.wangshangyou.com/content/uploadfile/201312/b3241386050881.png'; $src_im = 'htt ...

  3. SpringMVC框架(四)文件的上传下载,上下文路径

    文件目录: SpringMVC配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...

  4. js-注释代码习惯

    功能块代码 /** * xxxx */ 定义的函数或方法 /* xxxx */ 调用了某个函数或方法 // <--xxx

  5. GBK和UTF8有什么区别

    GBK编码:是指中国的中文字符,其它它包含了简体中文与繁体中文字符,另外还有一种字符“gb2312”,这种字符仅能存储简体中文字符. UTF-8编码:它是一种全国家通过的一种编码,如果你的网站涉及到多 ...

  6. HDU 5934 强联通分量

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  7. ASP.NET Core 处理 404 Not Found

    问题 在没有修改任何配置的情况下,这是用户使用 Chrome 访问不存在的URL时会看到的内容: 幸运的是,处理错误状态代码非常简单,我们将在下面介绍三种技术. 解决方案 在以前的ASP.NET MV ...

  8. Bash : test 命令

    在 Bash 脚本中我们一般会使用 test 命令来进行条件检查.test 命令的返回值为 0 或 1.0 表示 true, 1 表示 false.简单起见,我们可以直接认为 test 的结果为 tr ...

  9. Django中添加富文本编辑器

    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...

  10. 【完美解决】2017打开MVC 4项目,cshtml页面提示‘当前上下文不存在名称model’

    时间:2017/10/19 背景:领导让再之前的MVC 4老项目上新增功能,从GIT上拉取下来,使用VS2017打开之后,cshtml界面所有和Razor相关的代码均被提示‘当前上下文不存在名称XXX ...