DOM, Document Object Model, Document Object Model, for short DOM, is a logical and standard document structure, a list through which we can see, search and edit elements and data from HTML and XML docs.
Itself a hierarchy of objects, the DOM structure is compatible with JavaScript or other object-based languages.
With DOM HTML, JavaScript can access and modify all elements of an HTML document. When a webpage is obtained, the browser creates a model page object. The DOM HTML model is built similar to a tree made entirely of objects.
By using JavaScript and DOM, you can create a dynamic HTML file
1. JavaScript can change all the HTML elements on the page
2.JavaScript can change all HTML attributes in the page
3.JavaScript can change all CSS styles in the page
4.JavaScript can remove existing HTML elements and attributes
5.JavaScript can add new HTML elements and attributes
6.JavaScript can respond to all current HTML events on the page
7.JavaScript can create new HTML events on the page
What is the method description for finding HTML elements
document. getElementById (id) \ Find an element with an id
document. getElementsByTagName (name) \ Find items by label name
document. getElementsByClassName (name) \ Find items by class name
What is the method description for changing HTML elements
element .innerHTML = new html content \ Changing the HTML of an element
element. attribute = new value \ Change the attribute value of an HTML element
.setAttribute (attribute, value) element \ Modify the attribute value of an HTML element
element .style. property = new style \ Change the style of an HTML element
What is the method description for adding and deleting items
document. createElement (element) \ Create an HTML element
document. removeChild (element) \ Remove an HTML element
document. appendChild (element) \ Add an HTML element
document. replaceChild (element) \ Replace an HTML element
document. write (text) \ Write to the HTML output stream
What is the method description to handle events
document. getElementById (id) .onclick = function () {code} \ Add event handling code to an onclick event
What is the method description for finding HTML objects
document.anchors \ Returns all <a> items that have a name attribute
document.applets \ Returns all the <applet> elements (Deprecated in HTML5)
document.baseURI \ Returns the absolute base URI of document
document.body \ Returns <body> element
document.cookie \ Returns document cookie
document.doctype \ Returns document DOCTYPE
document.documentElement \ Returns <html> element
document.documentMode \ Returns the mode used by the browser
document.documentURI \ Returns document URI
document.domain \ Returns the document server domain name
document.domConfig obsolete. \ Returns the DOM 3 configuration
document.embeds \ Returns all <embed> elements
document.forms \ Returns all <form> elements
document.head \ returns <head> Element
document.images \ Returns all <img> Elements
document.implementation \ Returns DOM 3 implementation
document.inputEncoding \ Returns the character set of character set
document.lastModified \ Returns the date and time the document was updated
document.links \ Returns all <area> and <a> items that have a href attribute
document.readyState \ Returns (loading) document status
document.referrer \ Returns the linking document (the linking document)
document.scripts \ Returns all <script> elements
document.strictErrorChecking \ Returns if error checking is performed
document.title \ Returns <title> element
document.URL \ Returns the full document URL