Object Element ng HTML DOM

Element na bagay

Sa HTML DOM, ang Element object ay kumakatawan sa HTML na elemento, tulad ng P, DIV, A, TABLE o anumang ibang HTML na elemento.

Attribute at Method

Ang mga attribute at method na ito ay puwedeng gamitin sa lahat ng HTML na elemento:

Attribute / Method Paglalarawan
accessKey Iseto o ibawain ang halaga ng attribute accesskey ng elemento.
addEventListener() Magdagdag ng event handler sa elemento.
appendChild() Magdagdag ng bagong anak sa elemento.
attributes Ibawain ang NamedNodeMap ng mga attribute ng elemento.
blur() Alisin ang tungkulin ng pagfokus mula sa elemento.
childElementCount Ibawain ang bilang ng mga anak na elemento.
childNodes Ibawain ang NodeList ng mga anak na bago ang elemento.
children Ibawain ang HTMLCollection ng mga anak ng elemento.
classList Ibawain ang pangalan ng klase ng elemento.
className Iseto o ibawain ang halaga ng attribute class ng elemento.
click() Imitate ang pag-click ng mouse sa elemento.
clientHeight Ibawain ang taas ng elemento, kasama ang padding.
clientLeft Ibawain ang lapad ng border sa kaliwa ng elemento.
clientTop Ibawain ang lapad ng border sa itaas ng elemento.
clientWidth Ibawain ang lapad ng elemento, kasama ang padding.
cloneNode() Kopyahin ang elemento.
closest() Hahanapin ang pinakamalapit na elemento na tumutugma sa CSS selector sa puno ng DOM.
compareDocumentPosition() Ihahambing ang dokumentong posisyon ng dalawang elemento.
contains() Kung ang node ay anumang dahilang elemento ng node, ibalik ang true.
contentEditable Iset o ibalik kung ang nilalaman ng elemento ay puwedeng maisulat.
dir Iset o ibalik ang halaga ng attribute na dir ng elemento.
firstChild Ibalik ang unang anak na elemento ng elemento.
firstElementChild Ibalik ang unang anak na elemento ng elemento.
focus() Hawakan ang fokus ng elemento.
getAttribute() Ibalik ang halaga ng attribute ng elemento.
getAttributeNode() Ibalik ang attribute node.
getBoundingClientRect() Ibalik ang laki at posisyon ng elemento sa viewport.
getElementsByClassName() Ibalik ang koleksyon ng mga anak na elemento na may ibinigay na pangalan ng klase.
getElementsByTagName() Ibalik ang koleksyon ng mga anak na elemento na may ibinigay na tag na pangalan.
hasAttribute() Kung ang elemento ay may ibinigay na attribute, ibalik ang true.
hasAttributes() Kung ang elemento ay may anumang attribute, ibalik ang true.
hasChildNodes() Kung ang elemento ay may anumang anak na elemento, ibalik ang true.
element.id Iset o ibalik ang halaga ng attribute na id ng elemento.
innerHTML Iset o ibalik ang nilalaman ng elemento.
innerText textContent
insertAdjacentElement() Idedalog ang bagong HTML elemento sa posisyon na kaugnay sa elemento.
insertAdjacentHTML() Idedalog ang HTML na teksto sa posisyon na kaugnay sa elemento.
insertAdjacentText() Idedalog ang teksto sa posisyon na kaugnay sa elemento.
insertBefore() Idedalog ang bagong anak na elemento bago ang kasalukuyang anak na elemento.
isContentEditable Kung ang nilalaman ng elemento ay puwedeng maisulat, ibalik ang true.
isDefaultNamespace() Kung ang ibinigay na namespaceURI ay default, ibalik ang true.
isEqualNode() Surunod ang dalawang elemento kung sila'y magkapareho.
isSameNode() Surunod ang dalawang elemento kung sila'y nasa parehong node.
isSupported() Naalis na sa paggamit.
lang Iset o ibalik ang halaga ng attribute na lang ng elemento.
lastChild Bumalik sa huling anak na elemento ng isang elemento.
lastElementChild Ibalik ang huling anak na elemento ng elemento.
matches() Ibalik true kung ang elemento ay tumutugma sa ibinigay na CSS selector.
namespaceURI Ibalik ang URI ng namespace ng elemento.
nextSibling Ibalik ang susunod na node na nasa parehong antas ng node tree.
nextElementSibling Ibalik ang susunod na elemento na nasa parehong antas ng node tree.
nodeName Ibalik ang pangalan ng node.
nodeType Ibalik ang uri ng uri ng node type.
nodeValue Iset o ibalik ang halaga ng node.
normalize() Ipagkakasama ang magkakasunod na text node sa elemento at tanggalin ang walang laman na text node.
offsetHeight Ibalik ang taas ng elemento, kasama ang paduang panig, border at scrollbar.
offsetWidth Ibalik ang lapad ng elemento, kasama ang paduang panig, border at scrollbar.
offsetLeft Ibalik ang patag na offset na posisyon ng elemento.
offsetParent Ibalik ang offset container ng elemento.
offsetTop Ibalik ang patag na offset na posisyon ng elemento.
outerHTML Iset o ibalik ang nilalaman ng elemento (kasama ang tag na simula at tag na tapus).
outerText Iset o ibalik ang panlabas na teksto ng node at ng lahat ng kaniyang mga anak.
ownerDocument Ibalik ang pinagmulan na elemento (document object) ng elemento.
parentNode Ibalik ang magulang na node ng elemento.
parentElement Ibalik ang magulang na elemento node ng elemento.
previousSibling Ibalik ang nakaraang node na nasa parehong antas ng node tree.
previousElementSibling Ibalik ang nakaraang elemento na nasa parehong antas ng node tree.
querySelector() Ibalik ang unang anak na elemento na tumutugma sa CSS selector.
querySelectorAll() Ibalik ang lahat ng mga anak na elemento na tumutugma sa CSS selector.
remove() Tanggalin ang elemento mula sa DOM.
removeAttribute() Tanggalin ang attribute mula sa elemento.
removeAttributeNode() Tanggalin ang attribute node at ibalik ang na tanggalin na node.
removeChild() Tanggalin ang anak na elemento mula sa elemento.
removeEventListener() Tanggalin ang naka-attach na event handler gamit ang methodong addEventListener().
replaceChild() Pagsukli ng mga anak ng elemento.
scrollHeight Bumalik sa kabuuan ng taas ng elemento, kasama ang paduang panig.
scrollIntoView() 将元素滚动到浏览器窗口的可见区域。
I-rolin ang elemento sa makikitang lugar ng window na browser. scrollLeft
I-set at i-balik ang bilang ng pixel ng horizontal scrolling ng nilalaman ng elemento. scrollTop
I-set at i-balik ang bilang ng pixel ng vertical scrolling ng nilalaman ng elemento. scrollWidth
I-balik ang kumpletong lapad ng elemento, kasama ang padding. setAttribute()
I-set at i-alinlangan ang halaga ng attribute. setAttributeNode()
I-set at i-alinlangan ang attribute na node. style
I-set at i-balik ang halaga ng style property ng elemento. tabIndex
I-set at i-balik ang halaga ng tabindex property ng elemento. tagName
I-balik ang pangalan ng tag ng elemento. textContent
I-set at i-balik ang teksto ng node at ng lahat ng kanilang mga anak. title
I-set at i-balik ang halaga ng title property ng elemento. Ibaguhin ang elemento bilang string.

Ang paglalarawan ng Element na interface

Ang Element na interface ay naglalarawan ng HTML na elemento, XML na elemento o tag. Ang property na tagName ay nagtatalaga ng pangalan ng elemento. Ang property na documentElement ng Document ay sumusumpong sa pangunahing Element na bagay ng dokumento. Ang property na body ng HTMLDocument na bagay ay katulad din, ito ay sumusumpong sa <body> na elemento ng dokumento. Upang makahanap ng elemento na may tiyak na pangalan sa isang HTML na dokumento, gamitin ang Document.getElementById () (at bigyan ng isang tiyak na pangalan ang elemento sa pamamagitan ng id na property). Upang makalikha ng elemento na may tag na pangalan, gamitin ang getElementsByTagName () na ito ay isang paraan ng Element at Document. Sa HTML na dokumento, maaari ring gamitin ang katulad na HTMLDocument.getElementsByName () na paraan upang makalikha ng elemento ayon sa property na name ng elemento. Sa wakas, maaring gamitin ang Document.createElement () na paraan upang lumikha ng bagong Element na bagay na maitutulak sa dokumento.

Ang pagtatalaga ng event listener () na paraan (at ang kahalintulad na pagtatalaga ng event ng IE na attachEvent ()) ay nagbibigay ng paraan upang magtatalaga ng isang event handler function para sa partikular na uri ng kaganapan sa elemento. Sa teknikal na pananaw, ang addEventListener () , removeEventListener () at dispatchEvent () ay dinin definir ng EventTarget na interface ng 2-level DOM Events na patakaran. Lahat ng mga Element na bagay ay nagsasaklaw ng EventTarget.

Ang iba pang mga paraan ng interfeys ay nagbibigay ng pagkakasigla sa mga katangian ng elemento. Sa HTML na dokumento (at maraming XML na dokumento), lahat ng katangian ay may simple string na halaga, at maaari mong gamitin ang simple na mga paraan na getAttribute() at setAttribute() para sa anumang operasyon sa katangian.

Kung ikaw ay gumagamit ng XML na dokumento, maaaring mayroon itong Entity na reference na pahina bilang bahagi ng halaga ng katangian, kailangan mong gamitin ang Attr na bagay at ang kanyang mga bagay na anak. Maaari mong gamitin ang getAttributeNode() at setAttributeNode() upang kunin at itakda ang Attr na bagay, o maaari mong suriin ang Attr na bagay sa array ng attributes[] ng Node na interfeys. Kung ikaw ay gumagamit ng XML na dokumento na may namespace na pangalan, kailangan mong gamitin ang mga paraan na may pangalan na may 'NS'.

Sa 1st level DOM na tuntunin, ang normalize() na paraan ay bahagi ng Element na interfeys. Sa 2nd level na tuntunin, ang normalize() ay bahagi ng Node na interfeys. Lahat ng Element na bagay ay minana ito at maaring gamitin ito pa rin.

Kasanayan: mga bagay ng HTML DOM

Sa HTML DOM (dokumentong modelo ng bagay), bawat bahagi ay isang bagay:

  • Ang dokumento mismo ay dokumentong bagay
  • Ang lahat ng HTML na elemento ay mga elemento na bagay
  • Ang lahat ng HTML na katangian ay mga bagay na may katangian
  • Ang teksto sa loob ng HTML na elemento ay text na bagay
  • Ang mga komento ay mga comment na bagay

Element na bagay

Sa HTML DOM, ang Element na bagay ay naglalarawan ng HTML na elemento.

Ang Element na bagay ay maaaring may mga anak na bagay na may uri ng elemento, text na bagay, o comment na bagay.

Ang NodeList na bagay ay naglalarawan ng listahan ng mga bagay, tulad ng koleksyon ng mga anak ng HTML na elemento.

Ang mga elemento ay maaaring mayroon ng mga katangian. Ang mga katangian ay mga bagay na may katangian (tingnan ang susunod na Seksyon).