节点操作第一个子元素与最后一个子元素

最新推荐文章于 2022-11-27 01:26:02 发布
最新推荐文章于 2022-11-27 01:26:02 发布
阅读量893 收藏
点赞数
分类专栏： 学习笔记 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62962469/article/details/123452853
版权

获取第一个子元素firstChild 不管是文本节点还是元素节点 lastChild获取最后一个元素

firstElementChild 返回第一个子元素节点 找不到则返回null lastElementChild 返回最后一个子元素节点  这种写法存在兼容性问题 ie9以上支持

实际开发还可以这样写ol.chlidren[0] 与 ol.children[ol.children.length - 1]  根据子元素个数而定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
			<li>li4</li>
		</ol>
		<script type="text/javascript">
			var ol = document.querySelector('ol');
			//1.firstChild 第一个子节点 不管是文本节点还是元素节点
			console.log(ol.firstChild);  //获取第一个子节点 为换行
			console.log(ol.lastChild);  //获取第最后一个子节点 也是换行
			//2.firstElementChild 返回第一个子元素节点 找不到则返回null
			console.log(ol.firstElementChild); 
			console.log(ol.lastElementChild); 
               //3.使用ol.chlidren[0] 与 ol.children[ol.children.length - 1]
            console.log(ol.children[0]);  //第一个元素
            console.log(ol.children[ol.children.length - 1]);  //最后一个元素
		</script>
	</body>
</html>

结果如下：

 

 

hcoke
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
获取该元素的第一个子节点_js获取某元素下第一个子元素的标签名
weixin_39534149的博客
12-24 2781
js: document.getElementById(‘id’).firstChild.tagName;jQuery: $(‘#id’).children().first().prop(“tagName”);示例：//点击span等标签里面的内容后变成可编辑的输入框function edit(obj, name, id) {var that = $(obj);//var tag = obj.fi...
DOM Core 获取某节点下最后一个子元素节点、第一个子元素节点、下一个兄弟元素节点、上一个兄弟元素节点
何东狮吼
08-02 1万+
javascript获取某节点下最后一个元素节点 aaa //通过通配符获取到P元素节点下所有的元素节点，然后把节点数组长度-1，就是数组中最后一个数组元素的下标，由此可以得到最后一个元素节点 var txt = document.getElemen
JS获取元素的第一个子节点
北辰
08-22 2万+
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS获取元素的第一个子节点</title> </head> <body> <div id="divId"&gt...
js元素获取DOM里的最后一个子元素
YAYTXT的博客
02-23 2859
<select name="a" id="a" class="sec"> <option value="1">这是a1</option> <option value="2">a2a2a2</option> <option value="3">a3这是</option> </select> var aAll = document.querySelectorAll('#a opt
css选择器选择最后一个子元素
热门推荐
sixteen_cicle的博客
05-05 4万+
:last-child      p:last-child     选择属于其父元素最后一个子元素每个 元素。 div.news div:last-child { border-right:none; }
Js 更换html同一父元素下子元素的位置
weixin_30824599的博客
07-19 302
//更换两个元素的位置 var exchange=function (el1, el2) { 　　var ep1 = el1[0].parentNode, 　　ep2 = el2[0].parentNode, 　　index1 =...
一个获取第n个元素节点的js函数
01-19
一个获取第n个元素节点的函数，现在只能通过html标签获取元素，功能还不完善 演示：html <li>1<button>a</button> <li>2<button>b</button><button>o</button> <p>test <li>3...
JavaScript HTML DOM元素 节点操作汇总
10-16
这里，`container`的第一个子节点被替换为新的`<span>`元素。 **查找节点** 在DOM中查找节点通常涉及`getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`等方法。例如，通过ID获取元素： `...
C语言实现输出链表中倒数第k个节点
09-04
然后，它使用两个指针 `pKnode` 和 `head` 分别遍历链表，先移动 `k` 步使 `pKnode` 指向倒数第k个节点的前一个节点，再同时移动两个指针直到 `head` 达到链表末尾。此时 `pKnode` 将指向倒数第k个节点。 在 `main`...
jQuery遍历DOM元素与节点方法详解
10-22
3. `.first()` 和 `.last()`：分别返回匹配的第一个和最后一个元素。 4. `.eq(index)`：返回索引为`index`的元素，索引从0开始。 5. `.slice(start, [end])`：返回匹配元素集合的一部分，从`start`开始，到`end`...
DOM，BOM的相关操作（同用绑定、阻止默认行为、防止冒泡函数）
qq_45549336的博客
08-03 293
DOM，BOM，获取DOM，事件绑定，样式，防止冒泡，阻止默认行为通用函数1、什么是dom？什么是bom？1.1、DOM1.1.1、dom由来1.1.2、dom作用1.1.3、dom本质1.2、BOM1.2.1、bom由来1.2.2、我对bom与dom的理解2、DOM节点与元素2.1、DOM节点与元素的区别2.2、BOM常用属性和获取DOM节点以及操作元素2.2.1、BOM常用属性2.2.2、获取DOM2.2.3、操作dom元素2.2.4、操作dom元素DOM的增删改3、常用事件4、通用的事件绑定与取消，阻
子节点-第一个元素和最后一个元素（62）
weixin_45147894的博客
07-09 229
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g...
jq获取父元素的父元素的第一个子元素的值
大海无量的博客
05-05 8792
<div id="rooms"> <div class="room"> 201会议室 </div> <div class="room"> <button class="btn">获取父元素的父元素的第一个子元素的值</button> </div> </...
loadsh处理数组方法小记
lilili0327的博客
12-27 658
loadsh处理数组方法 工作中经常处理后端返回的数据。有些数据较为繁琐，使用loadsh处理较为方便~便分享下常用的loadsh处理数组的方法 官网地址：https://www.lodashjs.com/ 通过 npm安装：npm o -g npm和npm i --save loadsh 1）数组按num（个数）分类 _.chunk（arr,num） 2）将数组中为null或false等类型剔除...
第一个子节点-最后一个子节点
MagicWing的博客
10-17 1522
第一个子节点 最后一个子节点
【学习笔记40】DOM的节点操作
yizhiyang
11-27 1420
DOM的节点操作
el-popover 样式修改
huobaotianwang的博客
10-25 1198
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> .el-popover{ background-color: transparent !important; border-color: ...
4.DOM（三）1.获取元素的某个子元素c.getElementsByTagName(‘li‘)2.全部子元素①空白c.childNodes②无空白c.children 3获取第一个和最后一个子元素
lazylYYY的博客
08-10 6181
一：获取元素的某个子元素 ①先获取class为c的元素 letc=document.getElementById('c'); ②然后在获取id为c中的所有li letli=c.getElementsByTagName('li'); 二：获取元素的全部子元素 1.获取c的所有子节点（包括空格节点）letcc...
有趣且重要的css知识合集（7）去除最后一个子元素的伪元素
qq_39404437的博客
11-04 4914
去除最后一个子元素的伪元素，其含义也为不给最后一个子元素添加伪元素
div第一个和最后一个元素
最新发布
05-24
要获取一个div的第一个和最后一个元素，可以使用以下代码： ```javascript // 获取div元素 const divElement = document.querySelector('div'); // 获取第一个子元素 const firstChild = divElement.firstElementChild; // 获取最后一个子元素 const lastChild = divElement.lastElementChild; ``` 其中，`firstElementChild`用于获取第一个子元素，`lastElementChild`用于获取最后一个子元素。如果需要兼容老版本的浏览器，也可以使用`firstChild`和`lastChild`，但这些属性还包含文本节点等非元素节点，可能会导致一些问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hcoke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值