HTML DOM Element Nesnesi

Element nesnesi

HTML DOM'da, Element nesnesi P, DIV, A, TABLE veya herhangi bir diğer HTML elementi gibi HTML elementlerini temsil eder.

Özellik ve yöntemler

Aşağıdaki özellik ve yöntemler tüm HTML elementleri için kullanılabilir:

Özellik / Metod Açıklama
accessKey Elementin accesskey özellik değerini ayarlar veya döndürür.
addEventListener() Elemente olay işleyici ekler.
appendChild() Yeni alt nodeleri elemente ekler (ekler).
attributes Elementin özelliklerinin NamedNodeMap'ını döndürür.
blur() Elementten odak kaybını kaldırır.
childElementCount Elementin alt element sayısını döndürür.
childNodes Elementin alt nodelerinin NodeList'ini döndürür.
children Elementin alt elementlerinin HTMLCollection'ını döndürür.
classList Elementin sınıf adını döndürür.
className Elementin class özellik değerini ayarlar veya döndürür.
click() Elemente farenin tıklama eylemini simüle eder.
clientHeight Elementin yüksekliğini, iç boşlukları dahil ederek döndürür.
clientLeft Elementin sol çerçeve genişliğini döndürür.
clientTop Elementin üst çerçeve genişliğini döndürür.
clientWidth Elementin genişliğini, iç boşlukları dahil ederek döndürür.
cloneNode() Elementi klonlar.
closest() DOM ağacında CSS seçicisi ile eşleşen en yakın elementi arar.
compareDocumentPosition() İki elementin belge konumlarını karşılaştırır.
contains() Düğümün düğümün soyu ise true döndürür.
contentEditable Düzenlenemeyen içeriğin düzenlenebilir olup olmadığını ayarlar veya döndürür.
dir Düzenlenemeyen dir özelliğinin değerini ayarlar veya döndürür.
firstChild Elementin ilk alt düğümünü döndürür.
firstElementChild Elementin ilk alt elementini döndürür.
focus() Elemente odaklanmasını sağlar.
getAttribute() Element özelliğinin değerini döndürür.
getAttributeNode() Özellik düğümünü döndürür.
getBoundingClientRect() Elementin boyutunu ve görüntülenme konumunu döndürür.
getElementsByClassName() Belirtilen sınıf adına sahip alt elementlerin koleksiyonunu döndürür.
getElementsByTagName() Belirtilen etiket adına sahip alt elementlerin koleksiyonunu döndürür.
hasAttribute() Elementin belirtilen özelliği varsa true döndürür.
hasAttributes() Elementin herhangi bir özelliği varsa true döndürür.
hasChildNodes() Elementin herhangi bir alt nesnesi varsa true döndürür.
element.id Düzenlenemeyen id özelliğinin değerini ayarlar veya döndürür.
innerHTML Düzenlenemeyen içeriği ayarlar veya döndürür.
innerText Düğüm ve soyunun metin içeriğini ayarlar veya döner.
insertAdjacentElement() Elemente göre konumda yeni HTML elementi ekler.
insertAdjacentHTML() Elemente göre konumda HTML biçimli metin ekler.
insertAdjacentText() Elemente göre konumda metin ekler.
insertBefore() Mevcut alt nesne öncesine yeni alt nesne ekler.
isContentEditable Elementin içeriği düzenlenebilirse true döndürür.
isDefaultNamespace() Verilen namespaceURI varsayılan değerse true döndürür.
isEqualNode() İki elementin eşit olup olmadığını kontrol eder.
isSameNode() İki elementin aynı düğüm olup olmadığını kontrol eder.
isSupported() Kullanımdan çıkarıldı.
lang Düzenlenemeyen lang özelliğinin değerini ayarlar veya döndürür.
lastChild Düzenlenemeyen son alt nesne döndürür.
lastElementChild 返回元素的最后一个子元素。
matches() 如果元素与给定的 CSS 选择器匹配，则返回 true。
namespaceURI 返回元素的命名空间 URI。
nextSibling 返回位于相同节点树层级的下一个节点。
nextElementSibling 返回位于相同节点树层级的下一个元素。
nodeName 返回节点的名称。
nodeType 返回节点的节点类型。
nodeValue 设置或返回节点的值。
normalize() 合并元素中相邻的文本节点，并移除空的文本节点。
offsetHeight 返回元素的高度，包括内边距、边框和滚动条。
offsetWidth 返回元素的宽度，包括内边距、边框和滚动条。
offsetLeft 返回元素的水平偏移位置。
offsetParent 返回元素的偏移容器。
offsetTop 返回元素的垂直偏移位置。
outerHTML 设置或返回元素的内容（包括开始标签和结束标签）。
outerText 设置或返回节点及其后代的外部文本内容。
ownerDocument 返回元素的根元素（文档对象）。
parentNode 返回元素的父节点。
parentElement 返回元素的父元素节点。
previousSibling 返回位于相同节点树层级的上一个节点。
previousElementSibling 返回位于相同节点树层级的上一个元素。
querySelector() 返回与 CSS 选择器匹配的第一个子元素。
querySelectorAll() 返回与 CSS 选择器匹配的所有子元素。
remove() 从 DOM 中移除元素。
removeAttribute() 从元素中移除属性。
removeAttributeNode() 移除属性节点，并返回移除的节点。
removeChild() 从元素中移除子节点。
removeEventListener() 删除已使用 addEventListener() 方法附加的事件处理程序。
replaceChild() 替换元素中的子节点。
scrollHeight 返回元素的整体高度，包括内边距。
scrollIntoView() Elementi tarayıcı penceresinin görünen bölgesine kaydırır.
scrollLeft Element içeriğinin yatay olarak kaydırılan piksel sayısını ayarlar veya döner.
scrollTop Element içeriğinin dikey olarak kaydırılan piksel sayısını ayarlar veya döner.
scrollWidth Elementin genel genişliğini, iç boşlukları dahil, döner.
setAttribute() Özelliğin değerini ayarlar veya değiştirir.
setAttributeNode() Özellik düğümünü ayarlar veya değiştirir.
style Elementin style özelliği değerini ayarlar veya döner.
tabIndex Elementin tabIndex özelliği değerini ayarlar veya döner.
tagName Elementin etiket adını döner.
textContent Düğüm ve soyunun metin içeriğini ayarlar veya döner.
title Elementin title özelliği değerini ayarlar veya döner.
toString() Elementi bir dizeye dönüştür.

Element arayüzü ayrıntısı

Element arayüzü HTML elementleri, XML elementleri veya etiketleri temsil eder. tagName özelliği elementin adını belirtir. Document'in documentElement özelliği bu belgenin kök Element nesnesine atıfta bulunur. HTMLDocument nesnesinin body özelliği de benzer şekilde, belgenin <body> elementine atıfta bulunur. Bir HTML belgesinde belirli adlı bir elementi bulmak için Document.getElementById() kullanılır (ve elemente benzersiz bir ad vermek için id özelliği verilir). Elementi etiket adına göre belirlemek için getElementsByTagName() kullanılır, bu hem Element hem de Document yöntemidir. HTML belgesinde, benzer şekilde HTMLDocument.getElementsByName() yöntemi de elementin name özelliğine göre element aramak için kullanılır. Son olarak, Document.createElement() yöntemi ile yeni Element elementi oluşturabilirsiniz.

addEventListener() yöntemi (ve IE'ye özgü alternatif yöntem olan attachEvent() ) belirli türdeki olaylar için olay çubuğu fonksiyonunu kaydetmek için kullanılır. Teknik olarak, addEventListener() , removeEventListener() ve dispatchEvent() , 2. seviye DOM Events normunun EventTarget arayüzü tarafından tanımlanmıştır. Tüm Element nesneleri EventTarget'ı gerçekleştirir.

Bu arayüzün çeşitli diğer yöntemleri, elemanın özniteliklerine erişimi sağlar. HTML dökümanında (ve birçok XML dökümanında), tüm öznitelikler basit bir dize değeri içerir ve getAttribute() ve setAttribute() gibi basit yöntemleri kullanarak gerekli herhangi bir öznitelik işlemi yapabilirsiniz.

XML dökümanı kullanıyorsanız, öznitelik değerinin bir parçası olarak Entity referans sayfasını içerebilir. Öznitelik nesnesi ve bu nesnenin alt ağacını kullanmanız gerekecek. Bir öznitelik için getAttributeNode() ve setAttributeNode() kullanarak Attr nesnesi alabilir veya Node arayüzünün attributes[] dizisini kullanarak Attr düğümlerini dolaşabilirsiniz. XML ad alanı kullanan bir XML dökümanı kullanıyorsanız, "NS" adlı çeşitli yöntemleri kullanmanız gerekecek.

1. seviye DOM normunda, normalize() metodu Element arayüzünün bir parçasıdır. 2. seviye normunda, normalize() Node arayüzünün bir parçasıdır. Tüm Element düğümleri bu yöntemi miras alır ve hala kullanabilirler.

Konu: HTML DOM Düğümleri

HTML DOM (döküman nesne modeli) içinde, her bir bölümden düğüm:

  • Doküman kendisi, doküman düğümünü temsil eder
  • Tüm HTML elemanları, eleman düğümünü temsil eder
  • Tüm HTML öznitelikleri, öznitelik düğümünü temsil eder
  • HTML elemanı içindeki metin, metin düğümünü temsil eder
  • Yorumlar, yorum düğümünü temsil eder

Element nesnesi

HTML DOM'da, Element nesnesi HTML elemanını temsil eder.

Element nesnesi, eleman düğümü, metin düğümü veya yorum düğümü türünde alt düğümlere sahip olabilir.

NodeList nesnesi, örnek olarak HTML elemanlarının alt eleman koleksiyonlarını temsil eden düğüm listelerini gösterir.

Elemanlar da özniteliklere sahip olabilir. Öznitelikler, öznitelik düğümünü temsil eder (bir sonraki bölüme bakın).