# 实现“jquery firstElementChild”功能的步骤
## 简介
在开发过程中，我们经常需要获取DOM元素的第一个子元素。jQuery提供了便捷的方法`first()`来实现这个功能。然而，在某些情况下，我们可能需要直接使用原生JavaScript来实现这个功能，而不依赖jQuery库。本文将介绍如何使用原生JavaScript实现“jquery firstElementChi
原创
2023-12-19 07:58:12
16阅读
firstChild和firstElementChild firstChild获取父元素的第一个子元素节点或者文本节点。 firstElementChild获取父元素的第一个子元素节点，只返回HTML节点。 children和childNodes children返回父元素的子元素集合，只返回HTM ...
转载
2021-07-21 15:07:00
238阅读
2评论
一、JavaScript 子节点操作1、获取子节点需求2、firstChild 和 lastChild 属性 ( 不推荐 - 基于所有类型节点 )3、firstElementChild 和 l
JS 1.通过ByClassName,ById,ByTagName,Name2.获取子节点//通过childrens获取子节点集，会把换行和空格
document.getElementBy("").children[0];
//通过firstElementChild获取第一个子节点
document.getElementsByClassNmae()[0].firstElementChild
/
转载
2023-07-08 13:45:36
74阅读
在JS中获取子节点有以下几种方法：firstElementChild、firstChild、childNodes和children我们通过一个例子来分析这几种方法的区别（获取div下的p标签）输出结果是这样的： firstElementChild和Children 都成功获取到了p标签，那另外两个文本（#text）是什么东西呢？ 其实是因为现在的标准浏览器会为
转载
2023-06-14 14:44:56
457阅读
childElementCount：返回子元素（不包括文本节点和注释）的个数firstElementChild：指向第一个子元素；firstChild(返回第一个子节点)的元素版。//element.firstChild--->谷歌和火狐获取的是第一个子节点--->IE8获取的是第一个子元素
//element.firstElementChild--->谷歌和火狐获取的是第一个子
转载
2023-06-06 18:47:18
256阅读
目录1 NodeList接口，HTMLCollection接口1.1 NodeList接口1.2 HTMLCollection接口2 ParentNode接口，ChildNode接口2.1 ParentNode接口2.1.1 children2.1.2 firstElementChild2.1.3 lastElementChild2.1.4 childElementCount2.2 ChildNo
今天我们来复习DOM中的获取父元素、子元素和兄弟元素的API，它们主要有parentNode、firstChild、firstElementChild、lastChild、lastElementChild、childNodes、children、nextElementSibling、nextSibling、previousElementSibling、previousSibling等。目录获取父元
查找
已经站在一个节点上，找周围相邻的元素 遍历节点父子关系
parentNode
parentElement
childNodes
children
都返回动态集合
firstChild
firstElementChild
lastChild
lastElementChild
兄弟关系
previousSibling
previousElementSibling
nextSibling
next
转载
2024-04-25 10:19:54
77阅读
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性 所以为了准确地找到相应的元素，会用firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法，这是JavaScript自带的属性。 但坏消息是I
转载
2022-01-14 11:16:29
101阅读
1.节点关系父节点 parentElement 所有子节点 children 第一个子节点 firstElementChild 最后一个子节点 lastElementChild 上一个兄弟节点 previousElementSibling 下一个兄弟节点 nextElementSibling例：var sub = btn.parentElement.nextElementSibling;2.属性操
转载
2023-06-08 15:49:04
73阅读
4、div元素的原型链HTMLDivElement -> HTMLElement -> Element -> Node -> ...通过元素节点对象获取其他节点的方法element.childNodes 获取当前元素的子节点（会包含空白的子节点）element.children 获取当前元素的子元素element.firstElementChild 获取当前元素的第一个子元
原创
精选
2023-03-15 17:36:02
289阅读
DOM用appendChild()给表格添加新一行时，要注意，在HTML中没特别设置<thead>,<tbody>时，会自动添加上，所以要选择表格第一个元素在添加tr。 // 给表格中的tbody添加新tr table.firstElementChild.appendChild(tr); 用tr.r
原创
2021-10-22 10:26:30
638阅读
一、DOM：Document Object Model（文档对象模型）二、DOM的分类：1.DOM Core（核心）2.HTML-DOM3.CSS-DOM三、节点属性：1.lastElementChild:最后一个节点2.firstElementChild:第一个节点3.nextElementSibling：下一个节点4.previousElementSibling：上一个节点...
原创
2019-06-18 20:14:21
240阅读
一. 利用节点关系进行获取1 . 父子关系父节点 parentElement// 获取到父节点
var parent = document.getElementById("parent");所有子节点 children// 获取到所有的子节点
console.log(parent.children);第一个子节点 firstElementChild// 第一个子节点
var first = p
转载
2024-02-04 08:41:26
229阅读
获取子节点：
1.通过一个一个.获取节点：2.通过childNodes获取子节点:返回的也是子节点集合，是一个数组的格式。他会把换行和空格也当成是节点信息。3.通过children获取，不过他也是数组，按照数组的形式访问就行4.获取第一个子节点：firstChild,firstElementChild5.获取最后一个子节点：lastChild,lastElementChild//通过每一层.获
原创
精选
2023-02-21 11:52:38
262阅读
笔记核心：firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。 js不同于jQuery，在获取DOM时，有很多不方便的地方，哎，没办法，原始的东东，虽然万能，但却不方便。咱今天在使用原生js的时候，就遇见一个坑------》firstChild，具
转载
2023-06-06 15:52:32
1027阅读
1、获取子元素// 1、所有子元素
// children:获取所有的子元素（用途很广泛）=> 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素下面所有的子元素
// 2、获取第一个子元素
// firstElementChild => 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素里面的第一个元素
// 3、获取最后一个子元素
// lastElementChild
转载
2024-03-15 20:23:11
321阅读
高级浏览器: chrome firefox ie9及以上符合web标准浏览器。 低版本浏览器: ie6,ie7,ie8。 节点和元素的适用范围：以firstChild和firstElementChild为例: 第一个子节点:firstChild 高级浏览器使用能够获取 元素，文本(包括内容，空格，换行)，注释。 低版本浏览器使用能够获取 元素，文本(不包含空格，换行)，注释。 第一个子元素
转载
2023-12-03 20:37:23
91阅读
firstChild、lastChild 获取第一个、最后一个子节点，谷歌和火狐浏览器获取的是文本节点，而IE8及之前的浏览器会忽略文本节点，获取的是第一个、最后一个子节点firstElementChild、lastElementChild 获取第一个、最后一个子节点，谷歌和火狐浏览器获取的是第一个、最后一个子节点，但是IE8及之前的浏览器不支持使用<!DOCTYPE html>
&l
