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. __无标题栏的窗口拖动___javafx

    遇到困难::添加mouseevent监听,我用的mouse_DragedDetected配合MouseEvent.Pressed,,闪的不行,后来借鉴swing的pressed,move,releas ...

  2. c#字符编码,System.Text.Encoding类,字符编码大全:如Unicode编码、GB18030、UTF-8,UTF-7,GB2312,ASCII,UTF32,Big5

    本页列出来目前window下所有支持的字符编码  ---c#通过 System.Text.Encoding.GetEncodings()获取,里面可以对其进行查询,筛选,对同一个字符,在不同编码进行查 ...

  3. springMvc+hibernate的web application的构建

    闲来没事,想整理下一些知识. 这篇文章是关于spring的web程序的搭建,有什么不对的地方希望大家批评指正. 首先我们要了解什么是spring,这里可能很多大家也都明白,无非是一个管理对象的一个容器 ...

  4. mysql必知必会系列(一)

    mysql必知必会系列是本人在读<mysql必知必会>中的笔记,方便自己以后查看. MySQL. Oracle以及Microsoft SQL Server等数据库是基于客户机-服务器的数据 ...

  5. call()与apply() 改变this指向

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...

  6. LeetCode 107. Binary Tree Level Order Traversal II (二叉树阶层顺序遍历之二)

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  7. 使用selenium webdriver+beautifulsoup+跳转frame,实现模拟点击网页下一页按钮,抓取网页数据

    记录一次快速实现的python爬虫,想要抓取中财网数据引擎的新三板板块下面所有股票的公司档案,网址为http://data.cfi.cn/data_ndkA0A1934A1935A1986A1995. ...

  8. hdu 6215 -- Brute Force Sorting(双向链表+队列)

    题目链接 Problem Description Beerus needs to sort an array of N integers. Algorithms are not Beerus's st ...

  9. 事件轮询中的task与microtask

    event loop 网上看到的一篇文章,关于介绍task和Tasks, microtasks, queues and schedules,尝试简单翻译一下写进来吧! 原文地址:https://jak ...

  10. PHP内写css样式

    <1>php的两种输出方式 1,echo: 2,print; 栗子: <?php echo:"你好,我的名字是LHH"; print:"你好,我的名字是 ...