HTML DOM Element firstChild 属性

定义和用法

firstChild 属性返回指定节点的首个子节点，以 Node 对象。

firstChild 属性是只读的。

firstChild 属性与 childNodes[0] 相同。

注意

firstChild 返回第一个子节点：元素节点、文本节点或注释节点。

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

替代方案：

firstElementChild 属性 - firstElementChild 属性返回第一个子元素（忽略文本和注释节点）。

另请参阅：

childNodes 属性

lastChild 属性

nextSibling 属性

previousSibling 属性

节点属性

parentNode 属性

nodeName 属性

nodeType 属性

nodeValue 属性

实例

例子 1

返回 <ul> 元素的第一个子节点的 HTML 内容：

document.getElementById("myList").firstChild.innerHTML;

ทดสอบด้วยตัวเอง

例子 2

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

let text = document.getElementById("mySelect").firstChild.text;

ทดสอบด้วยตัวเอง

例子 3

此例演示空格的干扰。

尝试获取 "myDIV" 的第一个子节点的节点名：

<div id="myDIV">
  <p>ดูเหมือนลูกแรก</p>
  <p>ดูเหมือนลูกสุดท้าย</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

ทดสอบด้วยตัวเอง

ตัวอย่าง 4

แต่ถ้าคุณลบช่องว่างจากต้นฉบับ จะไม่มีตัวเครื่องมือ #text ใน "myDIV":

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

ทดสอบด้วยตัวเอง

ตัวเครื่องมือ HTML และส่วนประกอบ

ใน HTML DOMใน (โมเดลสำหรับเอกสาร HTML) สำหรับเอกสาร HTML คือชุดของตัวเครื่องมือที่มี (หรือไม่มี) ลูกตัวเครื่องมือ

ตัวเครื่องมือเป็นตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ

ตัวเครื่องมือช่องว่างระหว่างตัวเครื่องมือก็เป็นตัวเครื่องมือข้อความ

ตัวเครื่องมือเป็นตัวเครื่องมือข้อความ

ลูกตัวเครื่องมือและลูกเศษ

childNodes กลับค่าลูกตัวเครื่องมือ(ตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ)。

children กลับค่าลูกเศษ(ไม่ใช่ตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ)。

firstChild และ firstElementChild

firstChild กลับค่าลูกตัวเครื่องมือแรกลูกตัวเครื่องมือ(ตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ) ช่องว่างระหว่างตัวเครื่องมือก็เป็นตัวเครื่องมือข้อความ。

firstElementChild กลับค่าลูกตัวเครื่องมือแรกลูกเศษ(ไม่กลับค่าตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ)。

lastChild และ lastElementChild

lastChild กลับค่าลูกเศษสุดท้ายลูกตัวเครื่องมือ(ตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ) ช่องว่างระหว่างตัวเครื่องมือก็เป็นตัวเครื่องมือข้อความ。

lastElementChild กลับค่าลูกเศษสุดท้ายลูกเศษ(ไม่กลับค่าตัวเครื่องมือข้อความหรือตัวเครื่องมือหมายเหตุ)。

รูปแบบการใช้

element.firstChild

หรือ

node.firstChild

ค่าที่กลับค่า

รูปแบบ คำอธิบาย
ตัวเครื่องมือ

ลูกของตัวเครื่องมือแรก

ถ้าไม่มีลูก จะกลับค่า null。

การสนับสนุนบราวเซอร์

element.firstChild เป็นคุณสมบัติของ DOM Level 1 (1998)。

ทุกบราวเซอร์ทุกตัวเป็นที่สนับสนุนอย่างเต็มที่:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
การสนับสนุน 9-11 การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน