JavaScript HTML DOM

Sa pamamagitan ng HTML DOM, ang JavaScript ay kayang ma-access at baguhin ang lahat ng element ng dokumentong HTML.

HTML DOM (Document Object Model)

Kapag na-load ang pahina, ang browser ay magbibigay ng model ng dokumentong object ng pahina (Document Object Model).

HTML DOM Ang model ay struktural na itinatag bilangObject tree:

Ang tree ng HTML DOM ng object

DOM HTML Tree

Sa pamamagitan ng object model na ito, ang JavaScript ay mayroong lahat ng kapangyarihan para gumawa ng dynamic HTML:

  • Ang JavaScript ay kayang baguhin ang lahat ng HTML element sa pahina
  • Ang JavaScript ay kayang baguhin ang lahat ng HTML attribute sa pahina
  • Ang JavaScript ay kayang baguhin ang lahat ng CSS style sa pahina
  • Ang JavaScript ay kayang alisin ang mga magkaroon na HTML element at attribute
  • Ang JavaScript ay kayang magdagdag ng bagong HTML element at attribute
  • Ang JavaScript ay kayang tumutugon sa lahat ng magkaroon na HTML event sa pahina
  • Ang JavaScript ay kayang gumawa ng bagong HTML event sa pahina

Ano ang masusuri mo

Sa mga susunod na kabanata ng tutorial na ito, malalaman mo ang sumusunod:

  • Paano baguhin ang nilalaman ng HTML element
  • How to change the style (CSS) of HTML elements
  • How to react to HTML DOM events
  • How to add and delete HTML elements

What is DOM?

DOM is a W3C (World Wide Web Consortium) standard.

DOM defines the standard for accessing documents:

“The W3C Document Object Model (DOM) is a platform and language-independent interface that allows programs and scripts to dynamically access, update the content, structure, and style of documents.”

The W3C DOM standard is divided into 3 different parts:

  • Core DOM - Standard Model of All Document Types
  • XML DOM - Standard Model of XML Document
  • HTML DOM - Standard Model of HTML Document

What is HTML DOM?

HTML DOM is the standard of HTMLObjectsandProgramming Interface. It defines:

  • AsObjectsof the HTML elements
  • All HTML elementsProperties
  • Access all HTML elementsMethods
  • All HTML elementsEvents

In other words: HTML DOM is about how to get, change, add, or delete HTML elements standard.