Electronics is a scientific and engineering discipline that studies and applies the DOM.pptx
- 1. HTML DOM
- 2. Document Object Model DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using commands or methods provided by the Document object. Using DOM, the JavaScript gets access to HTML as well as CSS of the web page and can also add behavior to the HTML elements. Document Object Model is an API that represents and interacts with HTML or XML documents.
- 3. Why DOM is required? HTML is used to structure the web pages and Javascript is used to add behavior to our web pages. When an HTML file is loaded into the browser, the javascript can not understand the HTML document directly. So, a corresponding document is created(DOM). DOM is basically the representation of the same HTML document but in a different format with the use of objects.
- 4. Structure of DOM The term structure model is sometimes used to describe the tree-like representation of a document. Each branch of the tree ends in a node, and each node contains objects Event listeners can be added to nodes and triggered on an occurrence of a given event.
- 6. Window Object is object of the browser which is always at top of the hierarchy. It is like an API that is used to set and access all the properties and methods of the browser. It is automatically created by the browser. Document object: When an HTML document is loaded into a window, it becomes a document object. The ‘document’ object has various properties that refer to other objects which allow access to and modification of the content of the web page. Form Object: It is represented by form tags. Link Object: It is represented by link tags. Anchor Object: It is represented by a href tags. Form Control Elements:: Form can have many control elements such as text fields, buttons, radio buttons, checkboxes, etc.
- 7. Methods of Document Object • write(“string”): Writes the given string on the document. • getElementById(): returns the element having the given id value. • getElementsByName(): returns all the elements having the given name value. • getElementsByTagName(): returns all the elements having the given tag name. • getElementsByClassName(): returns all the elements having the given class name.
- 8. Levels of DOM • Level 0: Provides a low-level set of interfaces. • Level 1: DOM level 1 can be described in two parts: CORE and HTML. – CORE provides low-level interfaces that can be used to represent any structured document. – HTML provides high-level interfaces that can be used to represent HTML documents.
- 9. • Level 2: Six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL and RANGE. – CORE2: extends the functionality of CORE specified by DOM level 1. – VIEWS: views allows programs to dynamically access and manipulate the content of the document. – EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web page. – STYLE: allows programs to dynamically access and manipulate the content of style sheets. – TRAVERSAL: This allows programs to dynamically traverse the document. – RANGE: This allows programs to dynamically identify a range of content in the document.
- 10. • Level 3: Five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH. – CORE3: extends the functionality of CORE specified by DOM level 2. – LOAD and SAVE: This allows the program to dynamically load the content of the XML document into the DOM document and save the DOM Document into an XML document by serialization. – VALIDATION: This allows the program to dynamically update the content and structure of the document while ensuring the document remains valid. – EVENTS: extends the functionality of Events specified by DOM Level 2. – XPATH: XPATH is a path language that can be used to access the DOM tree.