关于节点的兼容性:

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. 解决GitHub下载慢或下载失败问题

    1.登录自己的码云账户 码云网站:https://gitee.com/luckyplj8/events 2.新建一个仓库. 3.选择导入已有仓库. GitHub资源链接: 4.等待码云克隆项目,大概1 ...

  2. AX 2012 Computed column IIF语句使用

    涉及Dynamics ax 行业已经好几年了,准备总结一些有用的处理方法供大家来参考 首先先介绍下Computed column技术,该技术是微软在AX2012版本中提供的新技术,可以让SQL语句在A ...

  3. [BZOJ5197] [CERC2017]Gambling Guide

    [BZOJ5197] [CERC2017]Gambling Guide 题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=5197 Solut ...

  4. OpenResty部署nginx及nginx+lua

    因为用nginx+lua去开发,所以会选择用最流行的开源方案,就是用OpenResty nginx+lua打包在一起,而且提供了包括redis客户端,mysql客户端,http客户端在内的大量的组件 ...

  5. java中常见关键字的介绍

    Java中类,属性,方法修饰符 public 公共访问权限,不但在本应用中可以放问,其他应用也可以访问.接口中的方法默认都是public的 protected 被protected修改的:可以被本类, ...

  6. WPF 获取元素(Visual)相对于屏幕设备的缩放比例,可用于清晰显示图片

    原文:WPF 获取元素(Visual)相对于屏幕设备的缩放比例,可用于清晰显示图片 我们知道,在 WPF 中的坐标单位不是屏幕像素单位,所以如果需要知道某个控件的像素尺寸,以便做一些与屏幕像素尺寸相关 ...

  7. System.InvalidOperationException:“寄宿 HWND 必须是子窗口。”

    原文:System.InvalidOperationException:"寄宿 HWND 必须是子窗口." 当试图在 WPF 窗口中嵌套显示 Win32 子窗口的时候,你有可能出现 ...

  8. easyUi——datetimebox绑定数据失效

    在做easy-ui时候,绑定数据不管在怎么写,都绑定不上去,最后发现是因为 标签的ID没有写,尴尬了,记录一下,防止后期出错. ui代码 <script type="text/java ...

  9. JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP

    网页框架类APP实现国际化参考文案一 参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法 本人用于H5版的AP ...

  10. 【开发笔记】- 转义html特殊字符

    package com.juihai.util; import org.apache.commons.lang.StringUtils; import org.springframework.web. ...