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 (menambahkan) child node baru ke elemen.
attributes Mengembalikan NamedNodeMap atribut elemen.
blur() Menghapus fokus dari elemen.
childElementCount Mengembalikan jumlah elemen child.
childNodes Mengembalikan NodeList child node elemen.
children Mengembalikan koleksi HTML child elemen.
classList Mengembalikan nama kelas elemen.
className Mengatur atau mengembalikan nilai atribut class elemen.
click() Meng模拟 klik mouse pada elemen.
clientHeight Mengembalikan tinggi elemen, termasuk margin dalam.
clientLeft Mengembalikan lebar garis kiri elemen.
clientTop Mengembalikan lebar garis atas elemen.
clientWidth Mengembalikan lebar elemen, termasuk margin dalam.
cloneNode() Menyalin elemen.
closest() Mencari elemen terdekat dalam pohon DOM yang cocok dengan pemilih CSS.
compareDocumentPosition() Bandingkan posisi dokumen dari dua elemen.
contains() Kembalikan true jika node adalah keturunan dari node.
contentEditable Mengatur atau mengembalikan apakah konten elemen dapat diedit.
dir Mengatur atau mengembalikan nilai atribut dir elemen.
firstChild Kembalikan node anak pertama dari elemen.
firstElementChild Kembalikan elemen anak pertama.
focus() Berikan fokus kepada elemen.
getAttribute() Kembalikan nilai atribut elemen.
getAttributeNode() Kembalikan node atribut.
getBoundingClientRect() Kembalikan ukuran elemen serta posisi yang berhubungan dengan viewport.
getElementsByClassName() Kembalikan koleksi elemen anak yang memiliki nama kelas yang diberikan.
getElementsByTagName() Kembalikan koleksi elemen anak yang memiliki nama tag yang diberikan.
hasAttribute() Kembalikan true jika elemen memiliki atribut yang diberikan.
hasAttributes() Kembalikan true jika elemen memiliki atribut apapun.
hasChildNodes() Kembalikan true jika elemen memiliki node anak.
element.id Mengatur atau mengembalikan nilai atribut id elemen.
innerHTML Mengatur atau mengembalikan konten elemen.
innerText Atur atau kembalikan konten teks anak dan node.
insertAdjacentElement() Masukkan elemen HTML baru di posisi yang berhubungan dengan elemen.
insertAdjacentHTML() Masukkan teks format HTML di posisi yang berhubungan dengan elemen.
insertAdjacentText() Masukkan teks di posisi yang berhubungan dengan elemen.
insertBefore() Masukkan node anak baru sebelum node anak yang ada.
isContentEditable Kembalikan true jika konten elemen dapat diedit.
isDefaultNamespace() Kembalikan true jika namespaceURI yang diberikan adalah nilai standar.
isEqualNode() Memeriksa apakah dua elemen sama.
isSameNode() Memeriksa apakah dua elemen adalah node yang sama.
isSupported() Ditinggalkan.
lang Mengatur atau mengembalikan nilai atribut lang elemen.
lastChild Mengembalikan node anak terakhir dari elemen.
lastElementChild Kembalikan anak elemen terakhir elemen.
matches() Kembalikan true jika elemen cocok dengan pemilih CSS yang diberikan.
namespaceURI Kembalikan URI namespace elemen.
nextSibling Kembalikan node berikutnya yang berada di tingkat yang sama di pohon node.
nextElementSibling Kembalikan elemen berikutnya yang berada di tingkat yang sama di pohon node.
nodeName Kembalikan nama node.
nodeType Kembalikan tipe node.
nodeValue Atur atau kembalikan nilai node.
normalize() Gabungkan node teks yang berdekatan dalam elemen dan hapus node teks yang kosong.
offsetHeight Kembalikan tinggi elemen, termasuk margin dalam, border, dan scrollbar.
offsetWidth Kembalikan lebar elemen, termasuk margin dalam, border, 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 konten teks luaran untuk node dan turunannya.
ownerDocument Kembalikan elemen root (objek dokumen).
parentNode Kembalikan node orangtua elemen.
parentElement Kembalikan node orangtua elemen.
previousSibling Kembalikan node sebelumnya yang berada di tingkat yang sama di pohon node.
previousElementSibling Kembalikan elemen sebelumnya yang berada di tingkat yang sama di pohon node.
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 node atribut dan kembalikan node yang dihapus.
removeChild() Hapus node anak dari elemen.
removeEventListener() Hapus penanganan acara yang ditambahkan dengan metode addEventListener().
replaceChild() Ganti node anak dalam elemen.
scrollHeight Kembalikan ketinggian keseluruhan elemen, termasuk margin dalam.
scrollIntoView() Gerakkan elemen ke area yang terlihat jendela browser.
scrollLeft Atur atau kembalikan pixel horizontal yang digerakkan konten elemen.
scrollTop Atur atau kembalikan pixel vertikal yang digerakkan konten elemen.
scrollWidth Kembalikan lebar keseluruhan elemen, termasuk margin internal.
setAttribute() Atur atau ubah nilai atribut.
setAttributeNode() Atur atau ubah node atribut.
style Atur atau kembalikan nilai atribut style elemen.
tabIndex Atur atau kembalikan nilai atribut tabindex elemen.
tagName Kembalikan nama tag elemen.
textContent Atur atau kembalikan konten teks anak dan node.
title Atur atau kembalikan nilai atribut title elemen.
toString() Konversi elemen ke string.

Pengertian Lengkap Interface Element

Interface Element merepresentasikan elemen HTML, elemen XML, atau tag. Atribut tagName menentukan nama elemen. Atribut documentElement Document mengacu ke objek Element root dari dokumen ini. Atribut body objek HTMLDocument juga mirip, ia mengacu ke elemen <body> dokumen. Untuk menemukan elemen dengan nama yang ditentukan di dokumen HTML, gunakan Document.getElementById() (dan berikan elemen ini nama unik melalui atribut id). Untuk menempatkan elemen berdasarkan nama tag, gunakan getElementsByTagName(), yang keduanya adalah metode Element dan Document. Pada dokumen HTML, juga dapat digunakan metode HTMLDocument.getElementsByName() untuk mencari elemen berdasarkan atribut name elemen. Akhirnya, dapat digunakan metode Document.createElement() untuk membuat elemen Element baru yang akan disisipkan ke dokumen.

Metode addEventListener() (dan alternatif spesifik IE attachEvent()) menyediakan cara untuk mendaftarkan fungsi penangan event khusus untuk jenis event tertentu di elemen ini. Secara teknis, addEventListener(), removeEventListener(), dan dispatchEvent() semua didefinisikan oleh interface EventTarget dari spesifikasi DOM Events tingkat 2. Semua objek Element melaksanakan EventTarget.

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

Jika Anda menggunakan dokumen XML, mungkin mengandung referensi Entity sebagai bagian dari nilai atribut, Anda harus menggunakan objek Attr dan pohon node. Anda dapat menggunakan getAttributeNode() dan setAttributeNode() untuk mendapatkan dan menetapkan objek Attr, atau dapat menggali array attributes[] di interface Node untuk melihat node Attr. Jika Anda menggunakan dokumen XML yang menggunakan ruang nama XML, Anda harus menggunakan metode yang mempunyai nama dengan "NS".

Dalam spesifikasi DOM tingkat 1, metode normalize() adalah bagian dari interface Element. Dalam spesifikasi tingkat 2, normalize() adalah bagian dari interface Node. Semua node Element mewarisi metode 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 dapat memiliki anak node bertipe node elemen, node teks, atau node komentar.

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

Elemen juga dapat memiliki atribut. Atribut adalah node atribut (lihat bagian berikutnya).