关于原生js的节点兼容性

绝地灬酷狼 2021-12-01 10:56 348阅读 0赞

关于节点的兼容性：

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

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

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

2:获取元素的父节点

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

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

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

*　　　![1213580-20190714202716361-538691298.png][]　　　　　　　*

*4：获取元素的上一个元素节点**　*

previousElementSibling：同样的存在兼容问题

![1213580-20190714212026562-1647350684.png][]

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

firstElementChild：同样兼容性问题，在ie中使用（firstChild）方法，兼容封装代码，同上。

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

lastElementChild

*：同样兼容性问题，在ie中使用（lastChild）方法，兼容封装代码，*

*![1213580-20190714221631919-722575832.png][]*

6：克隆节点

* cloneNode：*

如果小括号里面有参数，参数是true，表示深克隆： 能够克隆这个标签以及标签里面所有的内容。

如果小括号里面有参数，参数是false，表示浅克隆，只能克隆当前这个标签，不会克隆这个标签里面的内容。

如果小括号里面没有参数，默认是false。

7：追加子节点

appendChild：

克隆出来的标签只存在内存中，不会主动的追加到页面上

转载于:https://www.cnblogs.com/wukaiBK/p/11185547.html

[1213580-20190714202716361-538691298.png]: /images/20211201/3814cc52dccb428eb64ffe71b766a4a8.png
[1213580-20190714212026562-1647350684.png]: /images/20211201/1d64299e9420433d807fbed068893a1e.png
[1213580-20190714221631919-722575832.png]: /images/20211201/ec83e46f541d4eba850e7df514e25f3f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关关于getElementByClassName的兼容性问题

我们都知道用getElementByClassName方法来获取元素，有一些兼容性问题，IE9以下的浏览器并不支持这个方法；所以有时候我们需要自己写一个函数去实现这个

￡神魔★判官ぃ/ 2022年10月01日 02:46/ 0 赞/ 185 阅读

相关 js中原生ajax及其兼容性写法

ajax兼容性写法 var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpReque

女爷i/ 2022年09月09日 00:15/ 0 赞/ 249 阅读

相关原生js节点操作

节点属性值 1 获取上级节点 Node.parentNode //返回父节点 Node.ownerDocument //返回祖先节点

本是古典何须时尚/ 2022年06月09日 04:21/ 0 赞/ 190 阅读

相关关于浏览器兼容性问题

摘至本人有道云笔记《关于浏览器兼容性问题》今天在写python--web服务器的时候遇到一个浏览器兼容问题写响应头时 a='HTTP/1.1 20

忘是亡心i/ 2022年05月09日 02:34/ 0 赞/ 321 阅读

相关使用原生JS实现一款兼容性强大的滚动条

前言有一次写滚动条的项目发现无法在火狐等一些浏览器上运行于是就想用原生JS来实现一款兼容性比较强大的滚动条方便后续项目中有用到而且项目采用功能模块化的思想尽量

缺乏、安全感/ 2022年05月01日 12:30/ 0 赞/ 178 阅读

相关 js 节点的兼容

> > <!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="UTF-8"> >

叁歲伎倆/ 2022年03月10日 21:11/ 0 赞/ 219 阅读

相关 JS兼容性处理

1. [百度 - 终端适配API][-_API] 适合服务器端使用。POST客户端传递的http头信息越多，得到的适配信息越准确。百度返回的数据为：

落日映苍穹つ/ 2022年01月09日 06:51/ 0 赞/ 325 阅读

相关原生JS的兼容性问题

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题　封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)

妖狐艹你老母/ 2021年12月12日 00:23/ 0 赞/ 315 阅读

相关关于原生js的节点兼容性

关于节点的兼容性： 1：获取元素的子节点　a:　childNodes：获取元素的子节点，空文本，非空文本，注释，获取的比较全面，　　　　　　　　　如果只是想获取元

绝地灬酷狼/ 2021年12月01日 10:56/ 0 赞/ 349 阅读

相关原生js兼容性问题

1. 获取标签样式的兼容性问题 1. getComputedStyle(node,null).value 不支持IE8以及以下第一个参数是节点对象,第二

喜欢ヅ旅行/ 2021年09月17日 17:44/ 0 赞/ 432 阅读