HTML DOM Element-objekti

Elementti-objekti

HTML DOM:ssa Element-objekti edustaa HTML-elementtiä, kuten P, DIV, A, TABLE tai mitä tahansa muuta HTML-elementtiä.

Ominaisuudet ja metodit

Seuraavat ominaisuudet ja metodit ovat käytettävissä kaikissa HTML-elementeissä:

Ominaisuus / Metodi Kuvaus
accessKey Aseta tai palauta elementin accesskey-ominaisuuden arvo.
addEventListener() Lisää tapahtumankäsittelijä elementtiin.
appendChild() Lisää elementtiin uusi lapsinode (liitä).
attributes Palauta elementin ominaisuuksien nimikkokartta.
blur() Poista elementistä keskittymä.
childElementCount Palauta elementin lapsielementtien määrä.
childNodes Palauta elementin lapsinodejen NodeList.
children Palauta elementin lapsielementtien HTMLCollection.
classList Palauta elementin luokan nimi.
className Aseta tai palauta elementin class-ominaisuuden arvo.
click() Simuloi hiiren napsautus elementissä.
clientHeight Palauta elementin korkeus, mukaan lukien sisätilat.
clientLeft Palauta elementin vasemman reunan reunan leveys.
clientTop Palauta elementin yläreunan reunan leveys.
clientWidth Palauta elementin leveys, mukaan lukien sisätilat.
cloneNode() Kloonaa elementtiä.
closest() Hae lähin elementti DOM-puusta, joka vastaa CSS-valitsinta.
compareDocumentPosition() Vertailee kahden elementin asiakirjan sijaintia.
contains() Palauttaa true, jos solmu on toisen solmun jälkeläinen.
contentEditable Asettaa tai palauttaa elementin sisällön muokattavuuden.
dir Asettaa tai palauttaa elementin dir-ominaisuuden arvon.
firstChild Palauttaa elementin ensimmäisen lapsen.
firstElementChild Palauttaa elementin ensimmäisen lapsen.
focus() Antaa elementille fokuksen.
getAttribute() Palauttaa elementin ominaisuuden arvon.
getAttributeNode() Palauttaa ominaisuussolmun.
getBoundingClientRect() Palauttaa elementin koon ja sen sijainnin suhteessa näyttöikkunaan.
getElementsByClassName() Palauttaa joukon annetun luokan omaavia lapsisoluja.
getElementsByTagName() Palauttaa joukon annetun nimikkeen omaavia lapsisoluja.
hasAttribute() Palauttaa true, jos elementillä on annettu ominaisuus.
hasAttributes() Palauttaa true, jos elementillä on ominaisuuksia.
hasChildNodes() Palauttaa true, jos elementillä on lapsisoluja.
element.id Asettaa tai palauttaa elementin id-ominaisuuden arvon.
innerHTML Asettaa tai palauttaa elementin sisällön.
innerText Aseta tai palauta solmun ja sen jälkeläisten tekstisisältö.
insertAdjacentElement() Lisää uuden HTML-elementin elementin suhteelliseen sijaintiin.
insertAdjacentHTML() Lisää HTML-muotoista tekstiä elementin suhteelliseen sijaintiin.
insertAdjacentText() Lisää tekstiä elementin suhteelliseen sijaintiin.
insertBefore() Lisää uuden lapsen olemassa olevan lapsen eteen.
isContentEditable Palauttaa true, jos elementin sisältö on muokattavissa.
isDefaultNamespace() Palauttaa true, jos annettu namespaceURI on oletusarvo.
isEqualNode() Tarkistaa, ovatko kaksi elementtiä yhtä suuret.
isSameNode() Tarkistaa, ovatko kaksi elementtiä samassa solmussa.
isSupported() Käytöstä poistettu.
lang Asettaa tai palauttaa elementin lang-ominaisuuden arvon.
lastChild Palauttaa elementin viimeisen lapsen.
lastElementChild Palauta elementin viimeinen alijoukon elementti.
matches() Jos elementti vastaa annettua CSS-valitsinta, palauta true.
namespaceURI Palauta solmun nimiavaruuden URI.
nextSibling Palauta samassa solmun tasossa oleva seuraava solmu.
nextElementSibling Palauta samassa solmun tasossa oleva seuraava elementti.
nodeName Palauta solmun nimi.
nodeType Palauta solmun solmun tyyppi.
nodeValue Aseta tai palauta solmun arvo.
normalize() Yhdistä elementin vierekkäiset tekstisolmut ja poista tyhjät tekstisolmut.
offsetHeight Palauta elementin korkeus, mukaan lukien sisäinen marginaali, reunat ja kelkkapalkit.
offsetWidth Palauta elementin leveys, mukaan lukien sisäinen marginaali, reunat ja kelkkapalkit.
offsetLeft Palauta elementin horisontaalinen etäisyys.
offsetParent Palauta elementin etäisyys konteista.
offsetTop Palauta elementin pystysuuntainen etäisyys.
outerHTML Aseta tai palauta elementin sisältö (mukaan lukien aloitus- ja päättymistunnisteet).
outerText Aseta tai palauta solmun ja sen jälkeläisten ulkoinen tekstisisältö.
ownerDocument Palauta elementin juuri-elementti (dokumenttiosoite).
parentNode Palauta elementin emo-solmu.
parentElement Palauta elementin emo-solmu.
previousSibling Palauta samassa solmun tasossa oleva edellinen solmu.
previousElementSibling Palauta samassa solmun tasossa oleva edellinen elementti.
querySelector() Palauta ensimmäinen CSS-valitsimen mukainen alijoukon elementti.
querySelectorAll() Palauta kaikki CSS-valitsimen mukaiset alijoukon elementit.
remove() Poista DOM:sta elementti.
removeAttribute() Poista elementistä attribuutti.
removeAttributeNode() Poista attribuutin solmu ja palauta poistettu solmu.
removeChild() Poista elementistä alijoukon.
removeEventListener() Poista addEventListener() -menetelmällä lisätty tapahtumankäsittelijä.
replaceChild() Korvaa elementin alijoukon.
scrollHeight Palauta elementin kokonaiskorkeus, mukaan lukien sisäinen marginaali.
scrollIntoView() Vieritä elementti selaimen ikkunan näkyvälle alueelle.
scrollLeft Aseta tai palauta elementin sisällön horisontaalisen vierityksen pikkukuvion kuvauksen pisteet.
scrollTop Aseta tai palauta elementin sisällön pystysuuntaisen vierityksen pikkukuvion kuvauksen pisteet.
scrollWidth Palauta elementin kokonaisleveys, mukaan lukien sisätilat.
setAttribute() Aseta tai muuta ominaisuuden arvoa.
setAttributeNode() Aseta tai muuta ominaisuusnodea.
style Aseta tai palauta elementin style-ominaisuuden arvo.
tabIndex Aseta tai palauta elementin tabIndex-ominaisuuden arvo.
tagName Palauta elementin tagin nimi.
textContent Aseta tai palauta solmun ja sen jälkeläisten tekstisisältö.
title Aseta tai palauta elementin title-ominaisuuden arvo.
toString() Muunna elementti merkkijonoksi.

Element-liittymän yksityiskohtainen selitys

Element-liittymä edustaa HTML-elementtiä, XML-elementtiä tai merkkiä. tagName-ominaisuus määrittää elementin nimen. Dokumentin documentElement-ominaisuus viittaa tämän dokumentin juurelementtiin. HTMLDocument-objektin body-ominaisuus on samankaltainen, se viittaa dokumentin <body>-elementtiin. Etsiäksesi tiettyä nimeä olevaa elementtiä HTML-dokumentista, käytä Document.getElementById() -menetelmää (ja anna elementille yksilöllinen nimi id-ominaisuudella). Etsiäksesi elementtiä nimellä, käytä getElementsByTagName() -menetelmää, joka on sekä Elementin että Documentin menetelmä. HTML-dokumentissa voit käyttää samankaltaista HTMLDocument.getElementsByName() -menetelmää löytääksesi elementtejä name-ominaisuuden perusteella. Lopuksi, voit luoda uuden Element-elementin dokumenttiin Document.createElement() -menetelmällä.

addEventListener() -menetelmä (ja sen IE:lle erityinen korvaaja attachEvent()) tarjoaa tapa rekisteröidä tapahtumankäsittelijäfunktiota tietyn tapahtuman yhteydessä kyseisessä elementissä. Teknisesti puhuen, addEventListener(), removeEventListener() ja dispatchEvent() ovat 2. tason DOM Events -standardin EventTarget -liittymän määrittämiä. Kaikki Element-objektit toteuttavat EventTargetin.

Tämä rajapinnan muut menetelmät tarjoavat pääsyn elementin ominaisuuksiin. HTML-dokumentissa (ja monissa XML-dokumentteissa) kaikki ominaisuudet ovat yksinkertaisia merkkijonoarvoja, ja voit käyttää yksinkertaisia getAttribute() ja setAttribute() -menetelmiä tarvittaviin ominaisuusoperationeihin.

Jos käytät XML-dokumenttia, se voi sisältää Entity-referenssisiirtymän osana ominaisuuden arvoa, sinun on käytettävä Attr-objektia ja sen solmun juurta. Voit käyttää getAttributeNode() ja setAttributeNode() -menetelmiä Attr-objektin hakemiseen ja asettamiseen tai voit käydä läpi attributes[] -taulukon Node-rajapinnan kautta. Jos käytät XML-nimSpaces -nimistä XML-dokumenttia, sinun on käytettävä "NS"-nimisiä menetelmiä.

1. tason DOM-säännöissä normalize() -metodi on Element-rajapinnan osa. 2. tason säännöissä normalize() on Node-rajapinnan osa. Kaikki Element-solmut perivät tämän metodin ja voivat edelleen käyttää sitä.

Tieto: HTML DOM -solmut

HTML DOM (dokumenttiobjektipohjainen malli) -mallissa jokainen osa on solmu:

  • Dokumentti itsessään on dokumentti solmu
  • Kaikki HTML-elementit ovat elementti solmuja
  • Kaikki HTML-ominaisuudet ovat ominaisuus solmuja
  • HTML-elementin sisällä oleva teksti on tekstisolmu
  • Kommentti on kommentti solmu

Elementti-objekti

HTML DOM:ssa Elementti-objekti edustaa HTML-elementtiä.

Elementti-objekti voi omaa lapsisolmuja, joiden tyyppi on elementti, tekstisolmu tai kommentti solmu.

NodeList-objekti edustaa solmun luetteloa, esimerkiksi HTML-elementin lapsisolmut.

Elementillä voi olla ominaisuuksia. Ominaisuudet ovat ominaisuus solmuja (katso seuraava luku).