JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

最新推荐文章于 2021-06-26 17:39:14 发布
最新推荐文章于 2021-06-26 17:39:14 发布
阅读量120 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/TianHero/p/6057161.html
本文介绍如何使用DOM API在不同浏览器间进行兼容性处理，包括获取第一个子节点、最后一个子节点、下一个兄弟节点及上一个兄弟节点的方法，并提供了一个具体的例子。

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

<body>
	<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

1,firstChild:第一个子节点。

　　标准下：firstChild会包含文本类型的节点

　　非标准下（IE7以下）：fistChild只包含元素节点

　　var oUl = document.getElementById('ul1');

    alert( oUl.firstChild ); //标准下显示[object Text]，非标准下是[object HTMLLIElement]
    alert( oUl.firstElementChild )//标准和非标准都是 [object HTMLLIElement]

　　注意兼容性：

　　　var oFirst = oUl.firstElementChild || oUl.firstChild;
    　  oFirst.style.background = 'red';

2，lastChild：最后一个子节点（同上）

　　兼容性：

　　    var oLast = oUl.lastElementChild || oUl.lastChild;
    　　oLast.style.background = 'yellow';

3，nextSibling：下一个兄弟节点

　　    var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
    　　oNext.style.background = 'blue';4，previousSibling：上一个兄弟节点

    　　var oPrev = oLast.previousElementSibling || oLast.previousSibling;
    　　oPrev.style.background = 'orange';

转载于:https://www.cnblogs.com/TianHero/p/6057161.html

前端【7】javascript-dom操作
qq_73704268的博客
01-21 1165
在 for 循环中，先给每个元素绑定onclick，function内部不执行，触发事件时j已经循环完了，j已经为最后一个元素索引了所以arr[j] 永远指向最后一个元素，这样即使点击了其他元素，也会应用到最后一个元素上。而this 会指向触发该事件的 DOM 元素。
javaScript-API篇
Yc的博客
04-06 1378
javaScript-API篇DOM获取元素事件 导读： API------应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发者基于某软件或硬件得以访问一组例程的能力，且无需访问源码或理解内部代码。 Web API------浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM），Web工程师利用两者进行页面交互。 DOM 定义：文档对象模型，是W3C组织推荐的处理可扩展...
RootElement FirstChildElement FirstChildElement NextSiblingElement FirstAttribute
tycoon的专栏
04-22 2801
88208888             西安市太白南路二号                               88206666             西安市光华路                     程序代码XmlParseExample.cpp如下所示： #include  #include  #include    using s
javascript中的firstchild
bofengshuimen700的专栏
05-27 8529
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
firstChild，nextSibling，childNodes等属性的问题
u014433030的专栏
07-02 1414
在火狐，谷歌等浏览器中，获取第一个子节点、下一个兄弟节点等节点时，如果有空格，则返回的结果将会是#text； 所以应该将空格去掉；     aaa     bbb var li = ul.firstChild; console.log(li);//输出#text文本
js中firstChild与firstElementChild及childNodes与children的区别
qq_44731369的博客
02-17 2694
firstChild： 获取指定元素的第一个子节点 (包括元素节点和文本节点) 。 若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6319
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
javascript中的nextSibling使用陷(da)阱(keng)
10-25
在JavaScript中，DOM树的节点关系和遍历是开发者经常会使用到的功能，而`nextSibling`属性则是其中经常使用到的属性之一。`nextSibling`属性会返回指定节点的下一个兄弟节点。不过，它的行为在不同浏览器中存在一些...
跟着pink老师学前端之JavaScript-DOM
weixin_46548238的博客
06-26 1927
文章目录1. WebAPIs1.1 什么是DOM1.2 DOM树2. 获取元素2.1 根据id获取2.2 根据标签名获取3. 事件基础3.1 事件三要素3.2 执行事件的步骤4. 操作元素4.1 改变元素内容4.2 修改元素属性1. 点击不同按钮切换图片案例2. 分时问候案例3. 密码隐藏显示案例4. 样式属性操作(1) 行内样式操作关闭二维码案例循环精灵图背景案例显示隐藏文本框案例(2) 类名样式操作密码框判断格式案例5. 排他思想仿百度换肤案例表格变色案例全选反选案例6. 自定义属性操作5. 结点操作1
firstChild,lastChild,NextSibling,previousSibling的使用
我的IP在路上
04-28 1612
firstChild,lastChild,NextSibling,previousSibling的使用
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
HHH917的博客
04-21 4174
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点。 获取到的子节点可能是元素节点，但编程中更可能是注释节点或文本节点。 没有子节点则返回null 下面引用代码说明 下面代码我们需求是获取div的第一个子元素节点。但是结果返回的是文本节点，因为兼容问题， . 在IE9+和其他标准浏览器中，div与p之间的空白区域被...
兼容的firstChild,lastChild,nextSibling,previousSibling写法
abxn2002的专栏
12-19 1825
转载地址:http://www.w3cfuns.com/blog-5458045-5402770.html 在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,next
(五)学习JavaScript之firstChild 属性
weixin_30609331的博客
09-03 172
参考：http://www.w3school.com.cn/jsref/prop_node_firstchild.asp 定义和用法 firstChild 属性返回指定节点的首个子节点，以 Node 对象。 注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。 实例： <!DOCTYPE html&gt...
JavaScript之firstChild属性、lastChild属性、nodeValue属性学习
weixin_34026484的博客
07-22 398
1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化--------&gt;firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个子元素我们可以这样做: 目标元素节点下的子元素节点数组.firstChild 这句代码等价于 目标元素节点下的子元素节点数组[0]; 目标元素节点.childNodes[0] 这句代码等价于...
在学习js首个子元素（firstChild）中的一段js代码理解-笔记
weixin_43168278的博客
04-02 345
<!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script>...
firstChild和firstElementChild
fuxiaomi2016的博客
12-20 1024
第一个子节点
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）
吴声子夜歌的博客
09-25 3172
访问节点 通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerDocument：返回当前节点的根元素（document对象） parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点 childNodes：返回当前节点的所有子节点的节点列表 firstChild：返回当前节点的首个子节...
JS childNodes,firstChild,firstElementChild,children用法
分享我的点点滴滴，在成长路上与你同行！
08-14 750
在JS中获取元素子节点时候，使用childNode()遇到了一些问题，找了一些资料总结如下。 首先，用于测试先规定好HTML： <div> <p> <span></span> <span></span> <span></span> </p> <div></div> </div> 1 c
试编写算法，对一棵以孩子-兄弟链表表示的树统计其叶子结点的个数，c语言
最新发布
12-11
T->firstchild->nextsibling->firstchild->nextsibling->nextsibling = NULL; T->firstchild->nextsibling->nextsibling = NULL; // 统计叶子结点的个数 int leafCount = countLeaf(T); printf("The number of...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值