HTML DOM Element childNodes ປະກອບຕົວ

ການສະເໜີ ແລະ ການນໍາໃຊ້

childNodes ປະກອບຕົວກັບສະຖານະພັນຜູ້ລູກປະກອບ (ບັນດາ).

childNodes ປະກອບຕົວກັບ NodeList ອົງສະຫລະ.

childNodes ປະກອບຕົວແມ່ນສາມາດອ່ານພຽງພໍ.

childNodes[0] ດຽວກັນກັບ firstChild.

ຄຳເຕືອນ

childNodes ກັບຄືນຫຍັງ: ປະກອບຕົວ, ຫຍັງຕົວ, ແລະ ສັນຍານ.

ອາກາດລະຫວ່າງປະກອບຕົວກໍ່ແມ່ນຫຍັງຕົວ.

ທາງດັງ:

children ປະກອບຕົວ - children ປະກອບຕົວກັບຜູ້ລູກ (ບໍ່ມີຄວາມລະບຸແລະສັນຍານ).

ບໍ່ພົບຫາຫຍັງ:

firstChild ປະກອບຕົວປະກອບ

lastChild ປະກອບຕົວປະກອບ

nextSibling ປະກອບຕົວປະກອບ

previousSibling ປະກອບຕົວປະກອບ

hasChildNodes() ກົນລະຍຸດ

ປະກອບຕົວການ

parentNode ປະກອບຕົວປະກອບ

nodeName ປະກອບຕົວປະກອບ

nodeType 属性

nodeValue 属性

HTML 节点与元素

在 HTML DOM（文档对象模型）中，HTML 文档是拥有（或没有）子节点的节点集合。

节点指的是元素节点、文本节点和注释节点。

元素之间的空白也是文本节点。

而元素只是元素节点。

子节点与子元素

childNodes 返回子节点（元素节点、文本节点和注释节点）。

children 返回子元素（而非文本和注释节点）。

同胞与元素同胞

同胞是“兄弟”和“姐妹”。

同胞是拥有相同父节点的节点（在相同的 childNodes 列表中）。

元素同胞是拥有相同父元素的元素（在相同的 children 列表中）。

实例

例子 1

获取 <body> 元素的子节点：

const nodeList = document.body.childNodes;

亲自试一试

例子 2

获取 "myDIV" 中的子节点数：

let numb = document.getElementById("myDIV").childNodes.length;

亲自试一试

例子 3

更改第二个子节点的背景颜色：

element.childNodes[1].style.backgroundColor = "yellow";

亲自试一试

例子 4

获取 <select> 元素的第三个子节点的文本：

let text = document.getElementById("mySelect").childNodes[2].text;

亲自试一试

语法

element.childNodes

返回值

类型 描述
对象

节点的 NodeList 对象集合。

节点按照它们在文档中出现的顺序进行排序。

浏览器支持

element.childNodes 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持