What is HTML & JavaScript DOM.
Document Object Model(DOM) is a programming interface of HTML and XML document as a tree structure where each and every node having an object which is part of the document. DOM represents nodes and objects of the document. It displayed in the browser window or HTML Source(View by Ctrl + U). DOM an object-oriented which can be modified and change by scripting language like JS.
What is document object model.
Programming interface for HTML and XML documents. DOM represents the document as nodes and objects
HTML document object model is an object model for HTML. It represents the document as nodes and objects
DOM HTML Tree Structure of Tags
JavaScript DOM Methods and Properties
Methods of Documents Objects
- Write: Write HTML or JavaScript code to document.
- writeIn: Write code with add newline character after each statement.
- getElementById: Return the element having id value attribute.
- getElementsByName: Returns all elements with the given name value.
- getElementsByTagName: Returns all elements with the specified given tag name.
- getElementsByClassName: Returns all elements with the specified class name.
Methods of Element Objects
- accessKey: Sets or returns the accesskey attribute of an element.
- addEventListener: Attaches an event handler to the document.
- appendChild: Append a new child node, to the last child of the node.
- attributes: Return NameNodeMap of collection of specified nodes attributes.
- Blur: Remove focus from an element.
- childElementCount: Returns the number of child elements an element has.
- childNodes: Returns a collection of a node’s child nodes, as a NodeList object.
Methods of Event Objects
- abort: Event occurs when the loading of audio or video is an aborted click The event occurs when the mouse click on an element.
- contextmenu: Event occurs when the user right-clicks on an element to open the context menu.
- drag: Event occurs when an element or text selection is being dragged.
- drop: Event occurs when a draggable element selection is dropped on a valid drop target.
- keypress: The event occurs when the user presses a key.
Properties of Screen Objects
- availHeight: Returns the height of the user’s screen.
- availWidth: Returns the width of the user’s screen.
- colorDepth: Returns the bit depth of the color palette for displaying images
- height: Returns the total height of the user’s screen, in pixels.
- pixelDepth: Returns the color resolution of the visitor’s screen.
- width: Returns the total width of the user’s screen, in pixels.
Properties of Location Objects
- hash: Sets or returns the anchor part of a URL
- host: Sets or returns the hostname and port number of a URL
- hostname: Sets or returns the hostname of a URL
- href: Sets or returns the query string part of a URL
- origin: Returns the protocol, hostname, and port number of a URL
- pathname: Sets or returns the pathname of a URL.
- port: Sets or returns the port number of a URL
- protocol: Sets or returns the protocol of a URL
- Search: Sets or returns the query string part of a URL
Methods of navigation Objects
- appCodeName: Returns code with browser name.
- appName: Returns browser name.
- appVersion: Returns browser version information.
- cookie: Enabled Determines whether browser cookies are enabled.
- geolocation: Returns object that used to locate the user’s position.
- language: Returns the browser language.
- onLine: Determines browser is online.
- platform: Returns which platform the browser is compiled
- product: Returns the browser engine name.
- userAgent: Returns the header(user-agent ) sent by the browser to the server.
API = DOM + JavaScript
JavaScript Manipulate DOM
<div id="dom-container"></div> <script type=”text/javascript”> var domElement = document.getElementById(”dom-container”); domElement.innerHTML = ”MyFreeOnlineTools Provide Free Tools”; </script>
What Dom is NOT?
- Binary Description: It does not define any binary source code in its interfaces.
- Object in XML or HTML: Not used to describe objects in XML or HTML.
- Data Structures: An interface which is a specified object represents.
- The criticality of Object: Doesn’t have information about which object in the document is appropriate to the context.