Objek Element HTML DOM

Objek Element

Dalam HTML DOM, objek Element mewakili elemen HTML, seperti P, DIV, A, TABLE, atau elemen HTML lainnya.

Atribut dan Metode

Berikut ini adalah atribut dan metode yang dapat digunakan untuk semua elemen HTML:

Atribut / Metode Deskripsi
accessKey Mengatur atau mengembalikan nilai atribut accesskey elemen.
addEventListener() Menambahkan penanggung jawab peristiwa ke elemen.
appendChild() Menambahkan (melampirkan) node anak baru ke elemen.
attributes Mengembalikan NamedNodeMap atribut elemen.
blur() Menghapus fokus dari elemen.
childElementCount Mengembalikan jumlah elemen anak.
childNodes Mengembalikan NodeList dari node anak elemen.
children Mengembalikan koleksi HTML dari elemen anak.
classList Mengembalikan nama kelas elemen.
className Mengatur atau mengembalikan nilai atribut class elemen.
click() Melakukannya klik mouse ke elemen.
clientHeight Mengembalikan tinggi elemen, termasuk margin dalam.
clientLeft Mengembalikan lebar bingkai kiri elemen.
clientTop Mengembalikan lebar bingkai atas elemen.
clientWidth Mengembalikan lebar elemen, termasuk margin dalam.
cloneNode() Menyalin elemen.
closest() Mencari elemen paling dekat dalam pohon DOM yang sepadan dengan pemilihan CSS.
compareDocumentPosition() Bandingkan kedudukan dokumen dua elemen.
contains() Kembalikan true jika node adalah anak turun dari node.
contentEditable Tetapkan atau kembalikan kandungan elemen adalah boleh diubah atau bukan.
dir Tetapkan atau kembalikan nilai properti dir elemen.
firstChild Kembalikan hujung bawah pertama elemen.
firstElementChild Kembalikan elemen anak pertama.
focus() Jadikan elemen mendapat perhatian.
getAttribute() Kembalikan nilai properti elemen.
getAttributeNode() Kembalikan node properti.
getBoundingClientRect() Kembalikan saiz elemen dan kedudukan berbanding viewport.
getElementsByClassName() Kembalikan hebat elemen anak yang mempunyai nama kelas diberikan.
getElementsByTagName() Kembalikan hebat elemen anak yang mempunyai nama tag diberikan.
hasAttribute() Kembalikan true jika elemen mempunyai sebarang properti diberikan.
hasAttributes() Kembalikan true jika elemen mempunyai sebarang properti.
hasChildNodes() Kembalikan true jika elemen mempunyai anak bawah.
element.id Tetapkan atau kembalikan nilai properti id elemen.
innerHTML Tetapkan atau kembalikan kandungan elemen.
innerText 设置或返回节点及其后代的文本内容。
insertAdjacentElement() Sisipkan elemen HTML baru di kedudukan berbanding elemen.
insertAdjacentHTML() Sisipkan teks format HTML di kedudukan berbanding elemen.
insertAdjacentText() Sisipkan teks di kedudukan berbanding elemen.
insertBefore() Sisipkan hujung bawah baru sebelum anak bawah sedia ada.
isContentEditable Kembalikan true jika kandungan elemen adalah boleh diubah.
isDefaultNamespace() Kembalikan true jika namespaceURI diberikan adalah nilai lalai.
isEqualNode() Periksa sama ada kedua elemen adalah sepadan.
isSameNode() Periksa sama ada kedua elemen adalah node yang sama.
isSupported() Ditinggalkan.
lang Tetapkan atau kembalikan nilai properti lang elemen.
lastChild Kembalikan hujung bawah terakhir elemen.
lastElementChild kembalikan anak elemen terakhir elemen.
matches() kembalikan true jika elemen cocok dengan pemilih CSS yang diberikan.
namespaceURI kembalikan URI ruang nama elemen.
nextSibling kembalikan nod berikutnya yang berada di tingkatan yang sama di pohon nod.
nextElementSibling kembalikan elemen berikutnya yang berada di tingkatan yang sama di pohon nod.
nodeName kembalikan nama nod.
nodeType kembalikan tipe nod.
nodeValue atur atau kembalikan nilai node.
normalize() gabungkan nod teks yang berdekatan di dalam elemen, dan hapus nod teks yang kosong.
offsetHeight kembalikan tinggi elemen, termasuk marjin dalam, garis dan scrollbar.
offsetWidth kembalikan lebar elemen, termasuk marjin dalam, garis dan scrollbar.
offsetLeft kembalikan posisi horizontal elemen.
offsetParent kembalikan kontainer offset elemen.
offsetTop kembalikan posisi vertikal elemen.
outerHTML atur atau kembalikan konten elemen (termasuk tag awal dan akhir).
outerText atur atau kembalikan teks luaran konten node dan turunannya.
ownerDocument kembalikan elemen akar (objek dokumen).
parentNode kembalikan nod induk elemen.
parentElement kembalikan nod induk elemen.
previousSibling kembalikan nod sebelumnya yang berada di tingkatan yang sama di pohon nod.
previousElementSibling kembalikan elemen sebelumnya yang berada di tingkatan yang sama di pohon nod.
querySelector() kembalikan anak elemen pertama yang cocok dengan pemilih CSS.
querySelectorAll() kembalikan semua anak elemen yang cocok dengan pemilih CSS.
remove() hapus elemen dari DOM.
removeAttribute() hapus atribut dari elemen.
removeAttributeNode() hapus nod atribut, dan kembalikan nod yang dihapus.
removeChild() hapus anak nod dari elemen.
removeEventListener() hapus pemproses event yang ditambahkan dengan method addEventListener().
replaceChild() ganti anak nod elemen.
scrollHeight kembalikan ketinggian keseluruhan elemen, termasuk marjin dalam.
scrollIntoView() 将元素滚动到浏览器窗口的可见区域。
scrollLeft 设置或返回元素内容水平滚动的像素数。
scrollTop 设置或返回元素内容垂直滚动的像素数。
scrollWidth 返回元素的整体宽度，包括内边距。
setAttribute() 设置或更改属性的值。
setAttributeNode() 设置或更改属性节点。
style 设置或返回元素 style 属性的值。
tabIndex 设置或返回元素的 tabindex 属性的值。
tagName 返回元素的标签名。
textContent 设置或返回节点及其后代的文本内容。
title 设置或返回元素的 title 属性值。
toString() 将元素转换为字符串。

接口 Element 详解

接口 Element 表示 HTML 元素、XML 元素或标记。属性 tagName 指定了元素的名称。属性 documentElement 引用该文档的根 Element 对象。属性 body 类似于 HTMLDocument 对象，它引用了文档的 <body> 元素。要在 HTML 文档中找到指定名称的元素，使用 Document.getElementById()（并通过 id 属性给该元素一个唯一的名称）。要通过标记名来定位元素，使用 getElementsByTagName()，这既是 Element 的方法也是 Document 的方法。在 HTML 文档中，也可以使用类似的 HTMLDocument.getElementsByName() 方法来根据元素的 name 属性来查找元素。最后，可以用 Document.createElement() 方法，创建插入文档的新 Element 元素。

方法 addEventListener()（以及特定于 IE 的替代方法 attachEvent()）提供了在该元素上为特定类型的事件注册事件句柄函数的方法。从技术上讲，addEventListener()、removeEventListener() 和 dispatchEvent() 都是由2级 DOM Events 规范的 EventTarget 接口定义的。所有的 Element 对象都实现了 EventTarget。

Beberapa method lain di dalam interface ini menyediakan akses ke atribut elemen. Dalam dokumen HTML (dan banyak dokumen XML lainnya), semua atribut memiliki nilai string sederhana, dan Anda dapat menggunakan method getAttribute() dan setAttribute() untuk melakukan operasi atribut yang dibutuhkan.

Jika Anda menggunakan dokumen XML, mungkin termasuk referensi Entity di bagian nilai atribut, Anda akan harus menggunakan objek Attr dan pohon node anaknya. Anda dapat menggunakan method getAttributeNode() dan setAttributeNode() untuk mendapatkan dan menetapkan objek Attr, atau dapat menggali array attributes[] di interface Node untuk mengelilingi node Attr. Jika Anda menggunakan dokumen XML yang menggunakan ruang nama XML, Anda perlu menggunakan method dengan nama yang mengandung "NS".

Dalam spesifikasi DOM tingkat 1, method normalize() adalah bagian dari interface Element. Dalam spesifikasi tingkat 2, normalize() adalah bagian dari interface Node. Semua node Element mewarisi method ini dan masih dapat digunakan.

Ketahuan: Node DOM HTML

Dalam HTML DOM (Model Objek Dokumen), setiap bagian adalah node:

  • Dokumen itu sendiri adalah node dokumen
  • Semua elemen HTML adalah node elemen
  • Semua atribut HTML adalah node atribut
  • Teks dalam elemen HTML adalah node teks
  • Komentar adalah node komentar

Objek Element

Dalam HTML DOM, objek Element merepresentasikan elemen HTML.

Objek Element boleh punya anak node jenis node elemen, node teks, atau node komentar.

Objek NodeList merepresentasikan senarai node, seperti kumpulan anak elemen HTML.

Elemen boleh punya atribut. Atribut adalah node atribut (lihat bab berikutnya).