兼容的firstChild,lastChild,nextSibling,previousSibling写法（转）

最新推荐文章于 2020-12-23 18:00:47 发布
转载 最新推荐文章于 2020-12-23 18:00:47 发布 · 680 阅读 · 0
文章标签：

#js

本文介绍了在不同浏览器（IE与Firefox）中使用DOM操作时遇到的兼容性问题及解决方案，特别是针对firstChild等属性在Firefox中的特殊处理方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

困扰了我几个小时，终于在FF下显示正常了。。。。

在IE下是支持firstChild,lastChild,nextSibling,previousSibling
但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用
firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling
兼容的写法是这样的
var oFirst = oParent.firstElementChild||oParent.firstChild
也可以这么写
var oFirst = oParent.children[0];
var oLast = oParent.lastElementChild||oParent.lastChild
也可以这么写
var oLast = oParent.children[oParent.children.length-1];
var oNext = obj.nextElementSibling||obj.nextSibling
var oPre = obj.previousElementSibling||obj.previousSibling

JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)
08-07 1453
JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6319
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
兼容的firstChild,lastChild,nextSibling,previousSibling
祥子的博客
11-01 1548
在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法是这样的 var
javascript——DOM之firstChild,lastChild,NextSibling,previousSibling
weixin_34092370的博客
03-03 203
元素.firstChild : 只读 属性 第一个子节点 标准下：firstChild会包含文本类型的节点 非标准下：只包含元素节点 元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点 兼容标准和非标准浏览器的写法： HTML代码： <ul id="ul1"> <li>11111</li&g...
兼容的firstChild,lastChild,nextSibling,previousSibling写法
05-11 220
在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法是这样的...
previousSibling和nextSibling用法
pupilkk的博客
01-18 2077
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,nextElementSibling,previousElementSibling兼容的写法，这是JavaScript自带的属性。但坏消息是IE6,7,8
parentNode，children，nextSibling，previousSibling常用属性对比
图图小淘气的博客
06-17 1852
nextSibling： 返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； 注意: 空格、回车也会看作文本，以文本节点对待。 nextElementSibling： 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； previousSibling： 获取元素的上一个兄弟节点；（既包含元素节点、文本节点、注释节点） previousElementSibling： 获取上一个兄弟元素节点；（只包含元素节点）； childNodes： 返回当..
下面哪些属性有兼容性问题的（previousSibling，nextSibling，lastChild，firstChild）
04-29
其中，previousSibling 和 nextSibling 属性在某些浏览器中会返回空白文本节点，而 lastChild 和 firstChild 属性在某些浏览器中会返回注释节点。因此，在编写跨浏览器兼容的代码时，需要特别小心这些属性的使用。
JS——DOM操作（首尾子节点、兄弟节点【firstChild、previousSibling...】）
weixin_30263277的博客
05-28 606
（一）首尾子节点： 【首】：firstChild、 firstElementChild 【尾】：lastChild、 lastElementChild （首尾两个子节点，有两种写法，主要是因为兼容性问题） 详情看以下代码：　　（lastChild、 lastElementChild与之相同） 1 <!DOCTYPE html> 2 <html la...
浅析JavaScript中浏览器的兼容问题
11-23
在所有浏览器中，nextSibling和previousSibling属性都可以用来获取元素的下一个或上一个兄弟节点，但它们可能会返回非元素节点（如文本节点）。为了获取相邻的元素节点，我们需要在IE8及更早版本中进行特殊处理： `...
浏览器的兼容性问题
流萤梦的博客
10-18 365
浏览器兼容性问题是我们前端开发不可避免会遇到的一个难题。由于每个浏览器内核、版本、运行平台等等的差异，我们经常会看到类似normal，reset这样的文件引入，目的是为了初始化样式，也是为了兼容各大浏览器，而浏览器的兼容主要分为三种： CSS兼容 JavaScript兼容 HTML兼容 一、CSS兼容 而在这些兼容中，其实最主要需要考虑的就是IE浏览器的兼容性。 IE兼容性问题 1、块...
兼容性问题系列总结（一）
冰雪为融的博客
06-20 330
之前有写过css知识点系列总结，觉得效果还不错，所以打算把遇到的兼容性问题也汇总到一起，就当记笔记喽（也是会持续更新滴）2018/6/20--js兼容性问题--1. JSON 解析问题：   ecmascript5 通过 JSON 对象进行处理，ecmascript5 之前通过 eval 进行解析；2. 自定义属性问题：   IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 get...
js firstChild 、nextSibling、lastChild、previousSibling、parentNode
weixin_33721344的博客
05-08 218
nextSibling下一个兄弟节点 previousSibling上一个兄弟 parentNode父亲节点 1 &lt;select&gt;&lt;option value="zs"&gt;中山&lt;/option&gt;&lt;option value="gz"&gt;广州&lt;/option&gt;&lt;option value="
last-child兼容至IE8
沉着前进
10-09 8482
使用方法 jQuery :nth-child() 选择器的使用方法和 CSS3 的:nth-child()没什么两样。 关于 CSS3 :nth-child() 选择器 拽这里：http://www.exiang2.com/web/513.html :nth-child(odd)用于匹配奇数子元素 :nth-child(even)用于匹配偶数子元素
CSS3 :last-child 选择器
Worldの冫水的博客
05-21 283
IE8不支持，需做兼容性处理。
一篇文章搞懂DOM
shengjmm的博客
09-09 483
学习JavaScript肯定是会遇到DOM操作，那么什么是DOM？它又是干嘛用的？这篇文章为你揭晓答案。 DOM是document object model的缩写，简称文档对象模型。 简单的说DOM是一套对文档的内容进行抽象和概念化的方法。我们可以把HTML文档模型化,当作对象来处理。 基本概念： 文档(document): HTML或XML文件。 节点(node):HTML文档中的所有
浏览器对js中nextSibling与previousSibling属性的支持
victoria_wr的博客
07-22 799
若有众多空格作为文本节点，使用nextSibling和previousSibling时就会出现问题； 因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断； 当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。   其中nodeType的值主要有以下几种：         1.元素节点的nodeType值为1      
chrome js获取当前机器名_js常见兼容性问题
weixin_42231085的博客
12-23 1030
1.关于获取行外样式currentStyle和getComputedStyle出现的兼容问题我们都知道js通过style不可以获取行外样式，如果我们需要获取行外样式就会使用这两种ie下：currentStylechrome,FF下：getComputedStyle 第二个参数的作用是获取伪类元素的属性值//封装一个获取行外样式的函数（兼容所有浏览器，包括低版本ie6,7）function getS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值