firstChild、lastChild 和 firstElementChild、lastElementChild 的区别
文章目录
- 一、前言
- 二、Node.prototype.firstChild,Node.prototype.lastChild
- 三、ParentNode.firstElementChild、ParentNode.lastElementChild
- 四、总结一下
一、前言
DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
- Document:整个文档树的顶层节点
- DocumentType:doctype标签(比如
<!DOCTYPE html>
) - Element:网页的各种HTML标签(比如
<body>
、<a>
等) - Attr:网页元素的属性(比如 class=“right”)
- Text:标签之间或标签包含的文本
- Comment:注释
- DocumentFragment:文档的片段
所有 DOM 节点对象都继承了 Node 接口,拥有一些共同的属性和方法。这是 DOM 操作的基础。
节点对象除了继承 Node 接口以外,还拥有其他接口。ParentNode
接口表示当前节点是一个父节点,提供一些处理子节点的方法。ChildNode
接口表示当前节点是一个子节点,提供一些相关方法。
二、Node.prototype.firstChild,Node.prototype.lastChild
firstChild 和 lastChild 方法是 Node 接口上的属性。
firstChild
属性返回当前节点的第一个子节点,如果当前节点没有子节点,则返回 null
。
// HTML 代码如下
<div id="div1"><h1>hello</h1></div>let div1 = document.getElementById('div1');
console.log(div1.childNodes);
console.log(div1.firstChild);
childNodes
也是Node接口上的一个属性,返回一个类似数组的对象(NodeList
集合),成员包括当前节点的所有子节点。注意是所有子节点:除了元素节点,还包括文本节点和注释节点。
结果如图所示:
firstChild
返回的除了元素节点,还可能是文本节点或注释节点。
<div id="div1"><h1>hello</h1>
</div>let div1 = document.getElementById('div1');
console.log(div1.childNodes);
console.log(div1.firstChild);
结果如图所示:此次的返回结果除了包含h1标签之外,还有两个文本节点。他们是div和h1之间的回车和空格。
lastChild
属性返回当前节点的最后一个子节点,如果当前节点没有子节点,则返回 null
。用法与 firstChild
属性相同。
三、ParentNode.firstElementChild、ParentNode.lastElementChild
如果当前节点是父节点,就会混入了(mixin)ParentNode
接口。由于只有元素节点(element)、文档节点(document)和文档片段节点(documentFragment) 拥有子节点,因此只有这三类节点会拥有 ParentNode
接口。
firstElementChild
属性返回当前节点的第一个元素子节点(注意是只返回元素子节点,不包括文本结点和注释结点)。如果没有任何元素子节点,则返回 null。
<div id="div1"><h1>hello</h1>
</div>let div1 = document.getElementById('div1');
console.log(div1.children);
console.log(div1.firstElementChild);
children
是ParentNode接口上的一个属性,返回一个HTMLCollection
实例,成员是当前节点的所有元素子节点。该属性只读。注意,children属性只包括元素子节点,不包括其他类型的子节点(比如文本子节点)。如果没有元素类型的子节点,返回值HTMLCollection实例的length属性为0。另外,HTMLCollection是动态集合,会实时反映 DOM 的任何变化。
结果如图所示:
lastElementChild
属性返回当前节点的最后一个元素子节点,如果不存在任何元素子节点,则返回null。
四、总结一下
firstChild
、lastChild
返回的除了元素节点,还可能是文本节点或注释节点。childNodes
属性返回当前节点的所有子节点。
firstElementChild
、lastElementChild
只会返回当前节点的元素子节点。当然如果没有的话,就返回 null。children
返回当前节点的所有元素子节点。
资料:
Node 接口 - JavaScript 教程 - 网道
ParentNode 接口,ChildNode 接口 - JavaScript 教程 - 网道
前端学习交流QQ群,群内学习讨论的氛围很好,大佬云集,期待您的加入:862748629 点击加入
firstChild、lastChild 和 firstElementChild、lastElementChild 的区别相关推荐
- childNodes和children,firstChild和firstElementChild,lastChild和lastElementChild的区别
首先,我们给出HTML的代码 <ul id='city'><li>北京</li><li>南京</li><li>东京</li ...
- html dom firstchild,解析dom中的children对象数组元素firstChild,lastChild的使用
行1列1 行1列2 行2列1 行2列2 alert(test.children[0].tagName) alert(test.children[1].tagName) document.all.tbl ...
- firstChild,lastChild,NextSibling,previousSibling的使用
元素.firstChild:只读属性,第一个子节点 在标准下:firstChild会包含文本,类型的节点 非标准下:只包含元素节点 元素.firstElementChild : 只读 属性 标准下获取 ...
- CSS选择器之:first-child,:last-child
定义 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器. 提示:p:last-child 等同于 p:nth-first-child(1). :last-child 选择器 ...
- HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题
1 <html> 2 <head> 3 <title>HTML示例</title> 4 <style type="text/css&qu ...
- JS firstChild,LastChild
JS node.firstChild会返回node的所有子节点,而不是第一个子节点: 如果想返回第一个子节点需要用 node.firstChild.nodeValue; lastChild也相同
- CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法
官方链接:CSS3 :first-of-type 选择器 <div class="parent"><span class="child child1&q ...
- firstChild和firstElementChild
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- first-child first-of-type last-child last-of-type 伪类选择器总结
伪类选择符 一 先看定义: E:first-child{ } :匹配父元素的第一个子元素E. 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素 注意两 ...
最新文章
- SSH pager-taglib分页的实现
- SSHF备忘之依赖包(struts2+spring2.5+hibernate+freemarker)
- Spring Boot 静态资源处理,原来如此!
- centos7 LVM调整,划分home部分容量到root
- java内部类_Java内部类
- 换个skin,换个心情
- 【内核】进程切换 switch_to 与 __switch_to
- 深海迷航坐标传送代码_深海迷航秘籍代码大全 美丽水世界秘籍代码教程
- Unity3D for VR 学习(2): 暴风魔镜框架探索
- 【安卓】3.修改列表增加下划线样式(保姆级图文+附示例)
- 如何生成EAN13流水号条形码
- 干货|建模3D Max中常见问题
- 关闭tomcat6下的stdout日志
- android自带中文字体,Android中的默认字体系列是什么?
- 风火之旅 需要的信息保存
- EXCEL双击文件打开是空白的
- 关于全栈工程师的一点想法
- photoshop 字体小_使用Fontea Photoshop插件将Google字体添加到Photoshop
- 高并发系统设计 -- 贴子(post)的设计
- java游戏开发入门(二) - 菜单
热门文章
- java技能如何炫技
- NSString使用stringWithFormat拼接
- 推荐算法竞赛TOP方案合集
- 带哨兵节点的链_限流降级神器-哨兵(sentinel)的资源调用链原理分析
- 移植mjpg-streamer
- 【图片新闻】美国海军正在全力打造一支无人化的“幽灵舰队”
- 微型计算机接口课程设计报告,微机原理与接口技术课程设计报告
- window的tar.gz 到ubuntu上tar -zxf 文件名乱码
- Java OpenCV copyMakeBorder边界填充
- 软件测试 通用技术04 缺陷基本概述 缺陷的生命周期 缺陷的识别 缺陷报告 缺陷报告模板 测试需求、测试用例、缺陷报告的关系