关于节点的兼容性:

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. 防范sql注入值得注意地方

    sql注入是大家基本都清楚,一般来说用参数化就能解决注入的问题,也是最好的解决方式. 有次技术群里问到一个问题,如下图 很显然tableName是外部传递过来的,暂时不考虑具体的业务环境,但如果以se ...

  2. Unable to resolve service for type 'Microsoft.Extensions.Logging.ILogger' while attempting to activate 'xxxxx.Controllers.xxxxController'.

    Unable to resolve service for type 'Microsoft.Extensions.Logging.ILogger' while attempting to activa ...

  3. Python之路【第三十篇】:django 模型层-多表关系

    多表操作 文件为 ---->  orm2 数据库表关系之关联字段与外键约束 一对多Book id title price publish email addr 1 php 100 人民出版社 1 ...

  4. java知识精要(一)

    一.java数组 (疯狂java讲义 第4.5 ~ 4.6章节) 1) 声明形式: type[] arrayName; 推荐方式 type arrayName[]; 2) 初始化: 方式一: type ...

  5. golang 堆排序

    堆排序的思想  因为堆的形式是完全二叉树,跟数组的索引形成映射,可以使用数组保存.先构建最大(小)堆,根结点就是最大(小)值,删除根结点之后的节点重新构建堆,依此顺序,即可完成堆排序. 代码实现 pa ...

  6. 通过对比ASCII编码来理解Unicode编码

    Unicode是个规范,可以理解为一个索引表,世界上所有字符基本上在这个索引表中都能找到唯一一个数码与之对应,就像ASCII码表一样,也是一个规范,也可以看成是一个索引表,所有的英文字符都可以在这个索 ...

  7. Selenium+Java(十)Selenium常用方法

    前言: 通过前几篇博客的已经了解了元素如何定位,提示框下拉框如何处理,多表单,鼠标键盘操作.此篇博客来介绍拿到想应的driver对象后如果对于对象做一些操作. get //打开网站 driver.ge ...

  8. Java调用Http/Https接口(5)--HttpAsyncClient调用Http/Https接口

    HttpAsyncClient是HttpClient的异步版本,提供异步调用的api.文中所使用到的软件版本:Java 1.8.0_191.HttpClient 4.1.4. 1.服务端 参见Java ...

  9. 自学Python编程的第五天(希望有IT大牛帮我看最下面的代码)----------来自苦逼的转行人

    2019-09-15-15:40:24 今天没有学知识,是一个一周总结,把这一周学的知识总结一遍,然后把做过的练习题再做一遍 看是否还会有再出现同样的错误,而且还可以知道有哪些知识点没有掌握好,可以把 ...

  10. Python进阶(五)----内置函数Ⅱ 和 闭包

    Python进阶(五)----内置函数Ⅱ 和 闭包 一丶内置函数Ⅱ ####内置函数#### 特别重要,反复练习 ###print() 打印输入 #sep 设定分隔符 # end 默认是换行可以打印到 ...