Object HTML DOM Element

องค์ประกอบ Element

ใน HTML DOM องค์ประกอบ Element แสดงถึงองค์ประกอบ HTML ทั้งหมด เช่น P, DIV, A, TABLE หรือองค์ประกอบ HTML อื่นใดที่มีอยู่。

คุณสมบัติและวิธี

คุณสมบัติและวิธีดังนี้สามารถใช้สำหรับองค์ประกอบ HTML ทุกตัวอย่างนี้:

คุณสมบัติ / วิธี รายละเอียด
accessKey ตั้งค่าหรือคืนค่าค่าของคุณสมบัติ accesskey ขององค์ประกอบ。
addEventListener() ติดตั้งฮานดลอร์แอ็กเซซซ์ไปยังองค์ประกอบ。
appendChild() เพิ่ม (ติดตั้ง) ลูกใหม่สำหรับองค์ประกอบ。
attributes คืน NamedNodeMap ของคุณสมบัติขององค์ประกอบ。
blur() ลบความสำคัญขององค์ประกอบ。
childElementCount คืนจำนวนองค์ประกอบลูกขององค์ประกอบ。
childNodes คืน NodeList ของลูกขององค์ประกอบ。
children คืน HTMLCollection ขององค์ประกอบลูกขององค์ประกอบ。
classList คืนชื่อคลาสขององค์ประกอบ。
className ตั้งค่าหรือคืนค่าค่าของตัวแปร class ขององค์ประกอบ。
click() จำลองการคลิกหลังปุ่มหมุนหมุดบนองค์ประกอบ。
clientHeight คืนค่าความสูงขององค์ประกอบ รวมถึงเพดานหลังและเพดานหน้า。
clientLeft คืนค่าความกว้างของเพดานซ้ายขององค์ประกอบ。
clientTop คืนค่าความกว้างของเพดานบนขององค์ประกอบ。
clientWidth คืนค่าความกว้างขององค์ประกอบ รวมถึงเพดานหลังและเพดานหน้า。
cloneNode() คัดลอกองค์ประกอบ。
closest() ค้นหาองค์ประกอบออกแบบ DOM ที่ใกล้เคียงที่สุดที่ตรงกับเลือกตัวเลือก CSS。
compareDocumentPosition() เปรียบเทียบตำแหน่งของเอกสารขององค์ประกอบสองตัว
contains() หากตอนที่มีองค์ประกอบเป็นลูกหลานขององค์ประกอบ ก็จะกลับค่า true
contentEditable กำหนดหรือเรียกค่าการแก้ไขเนื้อหาขององค์ประกอบ
dir กำหนดหรือเรียกค่าคุณสมบัติ dir ขององค์ประกอบ
firstChild กลับค่าองค์ประกอบลูกแรก
firstElementChild กลับค่าองค์ประกอบลูกแรก
focus() ให้องค์ประกอบได้ความสนใจ
getAttribute() กลับค่าของคุณสมบัติขององค์ประกอบ
getAttributeNode() กลับค่าขององค์ประกอบของคุณสมบัติ
getBoundingClientRect() กลับค่าขนาดและตำแหน่งขององค์ประกอบเมื่อเทียบกับ视口
getElementsByClassName() กลับค่าชุดขององค์ประกอบที่มีชื่อรูปแบบที่กำหนด
getElementsByTagName() กลับค่าชุดขององค์ประกอบที่มีชื่อแทกที่กำหนด
hasAttribute() หากองค์ประกอบมีคุณสมบัติที่กำหนด ก็จะกลับค่า true
hasAttributes() หากองค์ประกอบมีคุณสมบัติ ก็จะกลับค่า true
hasChildNodes() หากองค์ประกอบมีองค์ประกอบลูก ก็จะกลับค่า true
element.id กำหนดหรือเรียกค่าคุณสมบัติ id ขององค์ประกอบ
innerHTML กำหนดหรือเรียกค่าเนื้อหาขององค์ประกอบ
innerText ตั้งหรือกู้ค่าของข้อความทั้งหมดของโครงสร้างหรือหลังเดินทางของโครงสร้าง
insertAdjacentElement() แทรกองค์ประกอบ HTML ใหม่ในตำแหน่งที่เกี่ยวข้องกับองค์ประกอบ
insertAdjacentHTML() แทรกข้อความ HTML ในตำแหน่งที่เกี่ยวข้องกับองค์ประกอบ
insertAdjacentText() แทรกข้อความในตำแหน่งที่เกี่ยวข้องกับองค์ประกอบ
insertBefore() แทรกองค์ประกอบใหม่ก่อนองค์ประกอบที่มีอยู่
isContentEditable หากองค์ประกอบมีเนื้อหาที่สามารถแก้ไขได้ ก็จะกลับค่า true
isDefaultNamespace() หาก namespaceURI ที่ให้มาเป็นค่าเริ่มต้น ก็จะกลับค่า true
isEqualNode() ตรวจสอบว่าสององค์ประกอบเท่ากัน
isSameNode() ตรวจสอบว่าสององค์ประกอบเป็นจุดฐานเดียวกัน
isSupported() ถูกยกเลิก
lang กำหนดหรือเรียกค่าของคุณสมบัติ lang ขององค์ประกอบ
lastChild เรียกค่าของ lang ขององค์ประกอบ
lastElementChild คืนค่าเด็กองค์ประกอบล่าสุดขององค์ประกอบ
matches() คืนค่า true หากองค์ประกอบตรงกับตัวเลือก CSS ที่กำหนด
namespaceURI คืนค่า URI ชื่อเว็บบริการขององค์ประกอบ
nextSibling คืนค่าตัวอักษรที่อยู่ในระดับเดียวกับต้นไม้ตัวอักษรที่ต่อไป
nextElementSibling คืนค่าองค์ประกอบตัวอักษรที่อยู่ในระดับเดียวกับต้นไม้ตัวอักษรที่ต่อไป
nodeName คืนค่าชื่อของตัวอักษร
nodeType คืนค่าชนิดของตัวอักษร
nodeValue ตั้งค่าหรือคืนค่าของค่าตัวอักษรของตัวอักษร
normalize() รวมตัวอักษรของเด็กตัวอักษรที่อยู่ในองค์ประกอบข้างๆ และลบตัวอักษรที่ว่าง
offsetHeight คืนค่าความสูงขององค์ประกอบ ซึ่งรวมถึงส่วนประกอบภายใน ส่วนบริเวณ และสายตา
offsetWidth คืนค่าความกว้างขององค์ประกอบ ซึ่งรวมถึงส่วนประกอบภายใน ส่วนบริเวณ และสายตา
offsetLeft คืนค่าตัวอักษรการเลื่อนย้ายตั้งตารางขององค์ประกอบ
offsetParent คืนค่าตัวอักษรองค์ประกอบเคลื่อนย้าย
offsetTop คืนค่าตัวอักษรการเลื่อนย้ายตั้งตารางขององค์ประกอบ
outerHTML ตั้งค่าหรือคืนค่าของเนื้อหาขององค์ประกอบ ซึ่งรวมถึงแสดงผลตัวอักษรแรกและสุดท้าย
outerText ตั้งค่าหรือคืนค่าของข้อความภายนอกของตัวอักษร และหลังทุกหลักเอกสารที่มี
ownerDocument คืนค่าตัวอักษรเศษที่เป็นเอกสาร (Document Object)
parentNode คืนค่าตัวอักษรพ่อขององค์ประกอบ
parentElement คืนค่าตัวอักษรพ่อขององค์ประกอบ
previousSibling คืนค่าตัวอักษรก่อนหน้าที่อยู่ในระดับเดียวกับต้นไม้ตัวอักษร
previousElementSibling คืนค่าองค์ประกอบก่อนหน้าที่อยู่ในระดับเดียวกับต้นไม้ตัวอักษร
querySelector() คืนค่าองค์ประกอบลูกแรกที่ตรงกับตัวเลือก CSS
querySelectorAll() คืนค่าทุกองค์ประกอบลูกที่ตรงกับตัวเลือก CSS
remove() ลบองค์ประกอบจาก DOM
removeAttribute() ลบตัวเลือกจากองค์ประกอบ
removeAttributeNode() ลบตัวเลือกขององค์ประกอบ และคืนค่าตัวเลือกที่ถูกลบ
removeChild() ลบเด็กขององค์ประกอบจากองค์ประกอบ
removeEventListener() ลบฝากิจการปฏิบัติงานเหตุการณ์ที่เพิ่มโดยอุปกรณ์ addEventListener()
replaceChild() แทนที่เด็กขององค์ประกอบ
scrollHeight คืนค่าความสูงทั้งหมดขององค์ประกอบ ซึ่งรวมถึงส่วนประกอบภายในแบบเลื่อนย้าย
scrollIntoView() ย้ายองค์ประกอบเข้าไปในบริเวณที่เห็นได้ของหน้าต่างนอก
scrollLeft ตั้งหรือกู้ค่าของจำนวนพิกเซลที่อาจเลื่อนตัวเนื้อหาที่มีขององค์ประกอบตามตัวยนต์ตามเส้นนอน
scrollTop ตั้งหรือกู้ค่าของจำนวนพิกเซลที่อาจเลื่อนตัวเนื้อหาที่มีขององค์ประกอบตามตัวยนต์ตั้งแต่ด้านบน
scrollWidth กู้ค่าความกว้างทั้งหมดขององค์ประกอบ รวมถึงพื้นที่เครื่องมือภายใน
setAttribute() ตั้งหรือเปลี่ยนแปลงค่าของแอตทริบิวต์
setAttributeNode() ตั้งหรือเปลี่ยนแปลงตัวแปรของโครงสร้าง
style ตั้งหรือกู้ค่าของตัวแปร style ขององค์ประกอบ
tabIndex ตั้งหรือกู้ค่าของตัวแปร tabIndex ขององค์ประกอบ
tagName กู้ค่าชื่อแทนขององค์ประกอบ
textContent ตั้งหรือกู้ค่าของข้อความทั้งหมดของโครงสร้างหรือหลังเดินทางของโครงสร้าง
title ตั้งหรือกู้ค่าของตัวแปร title ขององค์ประกอบ
toString() แปลงองค์ประกอบเป็นตัวอักษร

รายละเอียด Interface Element

Interface Element นำเสนอองค์ประกอบ HTML XML หรือ ตามาตราฐาน。ตัวแปร tagName กำหนดชื่อขององค์ประกอบ。ตัวแปร documentElement ของ Document อ้างอิง Element ที่เป็นองค์ประกอบเชิงหลักของเอกสารนี้。ตัวแปร body ของ Object HTMLDocument มีความเหมือนกัน มันอ้างอิงองค์ประกอบ <body> ของเอกสารนี้เช่นกัน ถ้าต้องการหาองค์ประกอบที่มีชื่อที่กำหนดมาก่อนในเอกสาร HTML ใช้ Document.getElementById() (และให้แก้ไของฉากไว้ด้วยค่า id ที่เป็นชื่อเดียวกัน) ถ้าต้องการหาองค์ประกอบโดยชื่อแทน ใช้ getElementsByTagName() ซึ่งเป็นวิธีของ Element และ Document ตามไปด้วย ในเอกสาร HTML ยังสามารถใช้วิธี HTMLDocument.getElementsByName() ที่คล้ายกันเพื่อหาองค์ประกอบโดยตัวแปร name ขององค์ประกอบ สุดท้าย ใช้วิธี Document.createElement() เพื่อสร้าง Element ใหม่ที่จะใส่เข้าไปในเอกสาร

方法 addEventListener() (และแนวทางที่เฉพาะ IE คือ attachEvent()) ให้ความเป็นไปได้ที่จะลงทะเบียนฟังเครื่องงานสำหรับประเภทเหตุการณ์เฉพาะที่มีอยู่บนองค์ประกอบนี้。ทางทศนิยมแล้ว addEventListener() removeEventListener() และ dispatchEvent() ต่างก็ถูกกำหนดโดยมาตราฐาน DOM Events ระดับ 2 ของ Interface EventTarget ซึ่งเป็นสมาชิกของ EventTarget ทั้งหมดของ Element ทั้งหมดมีการทำตามมาตราฐานนี้

วิธีอื่นๆ ของหลักฐานนี้มีการเข้าถึงคุณสมบัติขององค์ประกอบ ในเอกสาร HTML (และหลายเอกสาร XML) ทุกคุณสมบัติมีค่าของข้อความที่ง่าย และคุณสามารถใช้วิธีที่ง่าย getAttribute() และ setAttribute() สำหรับการปฏิบัติงานของคุณสมบัติที่ต้องการ

ถ้าคุณใช้เอกสาร XML มันอาจมีหน้าที่อ้างอิง Entity ในรายละเอียดของคุณสมบัติ คุณจะต้องใช้ Attr และกิ่งโครงของตัวองค์ประกอบ คุณสามารถใช้ getAttributeNode() และ setAttributeNode() สำหรับการของและตั้งค่า Attr หรือเลือกที่จะเลื่อนเข้าไปในอัลเล็กซาเรย์ attributes[] ของ Node หากคุณใช้เอกสาร XML ที่ใช้ชื่อช่องว่างที่มีชื่อ "NS" คุณจะต้องใช้วิธีที่มีชื่อที่มี "NS"

ในมาตราการ DOM ระดับ 1 วิธี normalize() คือส่วนหนึ่งของ Element ในมาตราการระดับ 2 normalize() คือส่วนหนึ่งของ Node ทุกองค์ประกอบ Element สืบทอดวิธีนี้และยังสามารถใช้งานได้

ความรู้: ตัวองค์ประกอบ HTML DOM

ใน HTML DOM (โมเดลว่าด้วยเอกสาร) ทุกส่วนเป็นตัวองค์ประกอบ:

  • เอกสารตัวเองคือตัวองค์ประกอบเอกสาร
  • องค์ประกอบทั้งหมดของ HTML คือตัวองค์ประกอบขององค์ประกอบ
  • คุณสมบัติทั้งหมดของ HTML คือตัวองค์ประกอบของคุณสมบัติ
  • ข้อความในองค์ประกอบ HTML คือตัวองค์ประกอบข้อความ
  • หมายเหตุคือตัวองค์ประกอบหมายเหตุ

องค์ประกอบ Element

ใน HTML DOM องค์ประกอบ Element แสดงอาทิตย์ HTML

องค์ประกอบ Element สามารถมีลูกที่มีชนิดเป็นตัวองค์ประกอบ ตัวองค์ประกอบข้อความ หรือ ตัวองค์ประกอบหมายเหตุ

NodeList แสดงรายการของตัวองค์ประกอบ ตัวอย่างเช่น ชุดของตัวองค์ประกอบลูกขององค์ประกอบ HTML

องค์ประกอบก็สามารถมีคุณสมบัติได้ คุณสมบัติคือตัวองค์ประกอบของคุณสมบัติ (ดูบทบาทต่อไปนี้)