关于节点的兼容性:

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] 树莓派 4B 安装 Ubuntu 19.10 (Eoan Ermine) IOT 版

    硬件:Raspberry Pi 4B系统:Ubuntu 19.10 (Eoan Ermine) for IOT官网:https://ubuntu.com/download/iot/raspberry- ...

  2. 手撕面试官系列(八):分布式通讯ActiveMQ+RabbitMQ+Kafka面试专题

    ActiveMQ专题 (面试题+答案领取方式见主页) 什么是 ActiveMQ? ActiveMQ 服务器宕机怎么办? 丢消息怎么办? 持久化消息非常慢. 消息的不均匀消费. 死信队列. Active ...

  3. 长乐国庆集训Day5

    T1 方阵 题目 [题目描述] 小澳最近迷上了考古,他发现秦始皇的兵马俑布局十分有特点,热爱钻研的小澳打算在电脑上还原这个伟大的布局. 他努力钻研,发现秦始皇布置兵马俑是有一定规律的.兵马俑阵总共有n ...

  4. redis源码分析(六)--cluster集群同步

    Redis集群消息 作为支持集群模式的缓存系统,Redis集群中的各个节点需要定期地进行通信,以维持各个节点关于其它节点信息的实时性与一致性.如前一篇文章介绍的,Redis在专用的端口监听集群其它节点 ...

  5. 【LEETCODE】67、分治递归,medium&hard级别,题目:215、312

    我被这些题整哭了,你呢??? 日了狗啊...... 好难啊.... 按照这个样子搞,不用找工作了,回家放牛去....... package y2019.Algorithm.divideandconqu ...

  6. 使用Nginx的X-Accel-Redirect实现大文件下载

    在实现文件下载功能时通常有以下几种方式: 1.直接给出下载地址,例如http://****.com/test/test.rar,这种是最直接的方式,任何人都可以下载,无法控制用户的权限. 2.验证权限 ...

  7. idea 添加 VUE 的语法

    1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...

  8. git设置代理模式,仅为github设置代理

    设置代理: 全局代理 git config --global http.proxy 127.0.0.1:1087 局部代理,在github clone 仓库内执行 git config --local ...

  9. C# Socket keeplive 心跳检测实例

    版权声明:本文为CSDN博主「b哈利路亚d」的原创文章,重新编辑发布,请尊重原作者的劳动成果,转载的时候附上原文链接:https://blog.csdn.net/lanwilliam/article/ ...

  10. 批量关联update

    UPDATE A SET A.field = B.field from table A inner join table B ON A.field = b.field