转

js获取子元素。js获取元素的指定子元素对象。js获取子节点的方法。js获取第一个子节点,js获取最后一个子节点

5078人阅读 2022/12/14 15:03 总访问：739832 评论：0 收藏：0 手机

分类: 前端

### 1、通过获取DOM方式直接获取子节点

其中price为父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候按数组的形式访问即可，如var a = document.getElementById("price").getElementsByTagName("div")[0] 返回的是数组里面的第一个元素。
```
var a = document.getElementById("price").getElementsByTagName("div"); 
```

### 2、通过childNodes 获取子节点

childNodes返回的是子节点的集合，也是数组的格式，不过它会把换行和空格也当成节点信息，不推荐使用。
```
var b =document.getElementById("price").childNodes;
```

### 3、通过children来获取子节点

children获取子元素是最好用的，它返回的也是一个数组，并且会过滤掉一些不必要的信息，如换行、空格等。
```
var c = document.getElementById("price").children;
```

### 4、通过firstChild获取第一个子节点

firstChild和childNodes类似，浏览器在解析它的时候的时候会把换行和空格一起解析，不推荐使用
```
var d = document.getElementById("price").firstChild;
```

### 5、通过firstElementChild获取第一个子节点

使用firstElementChild来获取第一个子元素，可直接获取第一个子元素，并不会将换行和空格一起解析
```
var e = document.getElementById("price").firstElementChild;
```

### 6、获取最后一个子节点

1.lastChild

2.lastElementChild

lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余。
```
var f = document.getElementById("price").lastChild;
var g = document.getElementById("price").lastElementChild;
```

原文：https://blog.csdn.net/Utopian_x/article/details/120386398

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 74篇

随笔 14篇

移动开发 6篇

数据库 8篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

js获取子元素。js获取元素的指定子元素对象。js获取子节点的方法。js获取第一个子节点,js获取最后一个子节点

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}