ES6 | HTML DOM
Advantages of DOM:
- Helps create an interactive web page since it allows the browser to recognize individual HTML objects even after they are rendered in the browser window.
- Allows the functionality of the objects to be controlled at will
- Helps update or modify data
- Navigator: The browser. Eg: Netscape Navigator, Internet Explorer, Opera, Mosaic etc.
- Window: The browser’s window.
- Document: The document displayed in the browser’s window. This further has multiple elements of its own. We are talking solely about forms here.
- Form: The DOM hierarchy continues downward to encompass individual elements of the form.
Document properties of Legacy DOM:
- alinkColor: This property defines the color of the activated links.
- anchors: It is the array of each anchor object, one for each anchor as it appears in the document.
- applets: It is the array of applet objects one for each applet as it appears in the document.
- bgColor: This property defines the background color of the document.
- Cookie: This property defines valued property with special behavior which allows the cookies associated with the document to be queried to set.
- Domain: This property defines the domain that a document belongs to it has been used for scurity purpose.
- embeds: Synonym for plugins. It is the array of objects that represent data embedded in the document
- fgColor: This property defines the default text color for the document.
- forms: It is the array of forms object one for each, as it appears in the form.
- images: It is the array of form objects, one for each element with <img> tag as it appears in the form.
- lastModified: This property defines date of the most recent update.
- linkColor: This property defines the color of unvisited links it is the opposite of the vlinkColor.
- links: Document link array.
- Location: This property holds the URL of the document.
- plugins: This property is the synonym for embeds.
- Referrer: String that contains the URL of the document if it is linked with any.
- Title: Contents of the <title> tag.
- URL: This property defines the URL.
- vlinkColor: This property defines the color of the visited links(not-activated).
Document methods in Legacy DOM:
- clear(): Erases the contents of the document and returns nothing.
- close(): Closes the document opened with open().
- open(): Deletes the existing document content and opens a stream to which the new document contents may be written. Returns nothing.
- write(): Inserts the specified string in the document.
- writeln(): Same as write() but inserts a new line after it is done appending.
2. W3C DOM: This DOM follows the standard World Wide Web Consortium which says:
“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents.”
This model focuses mostly on language neutrality so that scripting and styling documents can be made easy.
Document properties in W3C DOM:
- body: Contents of the tag.
- defaultView: Represents the window in which the document is displayed.
- documentElement: Reference to the tag of the document.
- implementation: Represents the DOMImplementation object that represents the implementation that created this document.
Documents methods in W3C DOM:
- createAttribute(name_of_attr): Returns a newly-created Attr node with the specified name.
- createComment(text): Creates and returns a new Comment node containing the specified text.
- createDocumentFragment(): Creates and returns an empty DocumentFragment node.
- createElement(tagname_of_new_ele): creates and returns a new Element node with a specified tagname.
- createTextNode(text): Creates and returns a new Text node that contains the specified text.
- getElementById(Id): Returns the value from the document of the element with the mentioned Id.
- getElementsByName(name): Returns an array of nodes with the specified name from the document.
- getElementsByTagName(tagname): Returns an array of all element nodes in the document that have a specified tagname.
- importNode(importedNode, deep): Creates and returns a copy of a node from some other document that is suitable for insertion into this document. If the deep argument is true, it recursively copies the children of the node too.
Eg. document.importNode(importedNode, deep)
3. IE4 DOM: This DOM was introduced in version 4 of Internet Explorer. Later versions expanded and went on to include features from W3C DOM.
Document properties in IE4 DOM:
- activeElement: Refers to the currently active input element.
- all: An indexable array of all element objects within the document.
- charset: Character set of the document.
- children: Array that contains the HTML elements that are the direct children of the document.
- defaultCharset: Default charset of the document.
- expando: When this property is set to false, it prevents client side objects from getting expanded.
- parentWindow: Document containing window.
- readyState: Specifies the loading status of the document.
- uninitialized: Document has not yet started loading.
- loading: Document is loading
- interactive: Document has loaded sufficiently for the user to interact.
- complete: Document has loaded.
Document methods in IE4 DOM:
- elementFromPoint(x,y): Returns the element located at the specified point.