关于节点的兼容性:

1:获取元素的子节点
 a: childNodes:获取元素的子节点,空文本,非空文本,注释,获取的比较全面,
         如果只是想获取元素的子节点,请用(children)

b:     children方法:可以获取元素的子节点,但是在(IE8中)除了可以获取子节点,还可以获取(注释节点) 一般情况下,          

          元素中不会有注释,但是如果有,可以使用(nodeType==8)来去除注释 节点

2:获取元素的父节点

   parentNode:获取元素的父节点,所有浏览器都支持,我喜欢

3:获取元素的下一个元素节点
   nextElementSibling:获取下一个兄弟节点,但是在ie8中,不支持这方法,需要兼容
         逻辑思路:ie8中支持nextSibling这个方法,nextSibling方法中也可以获取元素节点,

        只是获取的比较全面,可以单独把元素节点提取出来,达到兼容的目的

          

4:获取元素的上一个元素节点 

    previousElementSibling:同样的存在兼容问题

5:获取元素中的第一个子元素 

    firstElementChild:同样兼容性问题,在ie中使用(firstChild)方法,兼容封装代码,同上。

5:获取元素中的最后一个子元素     

    lastElementChild

:同样兼容性问题,在ie中使用(lastChild)方法,兼容封装代码,

6:克隆节点

 cloneNode:

如果小括号里面有参数,参数是true,表示深克隆: 能够克隆这个标签以及标签里面所有的内容。
如果小括号里面有参数,参数是false,表示浅克隆,只能克隆当前这个标签,不会克隆这个标签里面的内容。
如果小括号里面没有参数,默认是false。
 
7:追加子节点
appendChild:
克隆出来的标签只存在内存中,不会主动的追加到页面上

关于原生js的节点兼容性的更多相关文章

  1. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  2. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  3. 原生js方面的兼容性问题

    1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时:  我们一般通过这两 ...

  4. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  5. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  6. 原生JS与jQuery操作DOM对比

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p&g ...

  7. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  8. 放弃jQuery,使用原生js吧!

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  9. 常用原生JS方法总结(兼容性写法)

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

随机推荐

  1. Linux下signal信号汇总

    SIGHUP /* Hangup (POSIX). */ 终止进程 终端线路挂断 SIGINT /* Interrupt (ANSI). */ 终止进程 中断进程 Ctrl+C SIGQUIT /* ...

  2. [loj 6253] Yazid的新生舞会

    (很久之前刷的题现在看起来十分陌生a) 题意: 给你一个长度为n的序列A,定义一个区间$[l,r]$是“新生舞会的”当且仅当该区间的众数次数严格大于$\frac{r-l+1}{2}$,求有多少子区间是 ...

  3. Redis读写分离(三)

    1.redis高并发跟整个系统的高并发之间的关系 redis,要搞高并发的话,不可避免,要把底层的缓存搞得很好 mysql,高并发,做到了,那么也是通过一系列复杂的分库分表,订单系统,事务要求的,QP ...

  4. Java之数据类型讲解

    Java数据类型关系图 基本数据类型 从小到大的关系图: 图中从左向右的转换都是隐式转换,无需再代码中进行强制转换 : byte i = 12; System.out.println("by ...

  5. 解决打开IE报错“无法启动...丢失api-ms-win-core-path-l1-1-0.dll”的问题

    打开IE突然发现报错 试了各种方法都不行 最终看这篇文章,才解决:https://www.yijile.com/log/577.html 打开IE设置选项,选择管理加载项,如图讲该选项禁用,就不报错. ...

  6. RSA非对称 私钥加密

    RSA生成公钥和私钥对 /// <summary> /// RSA生成公钥和私钥 /// </summary> /// <returns></returns& ...

  7. rabbitmq监控之消息确认ack

    rabbitmq springboot ack 监控 一.测试环境 二.启动测试 一直以来,学习rabbitmq都是跟着各种各样的教程.博客.视频和文档,撸起袖子就是干!!!最后,也成功了. 当然,成 ...

  8. 米尔电子i.MX8开发板评测

    基于 NXP 公司的i.MX8M 系列芯片的高性能开发平台 MYD-JX8MX开发板.是采用核心板(MYC-JX8MX)加底板(MYB-JX8MX)的形式,提供了 HDMI,LVDS(或 MIPI), ...

  9. 【转载】C#中List集合使用AddRange方法将一个集合加入到指定集合末尾

    C#编程开发过程中,List集合是时常使用到的集合对象,如果在List集合的操作中需要将1个List集合加入到另一个List集合的末尾,则可以使用List集合的AddRange方法来实现,AddRan ...

  10. Vue学习之webpack中使用vue(十七)

    一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...