HTML DOM Document Object Model objects into the tree structure
HTML DOM is an operation that can be performed on the HTML element
HTML DOM property that can set or change the value of HTML elements
Find HTML elements
document.getElementById (id) Find elements by id
document.getElementByTagName (name) Find by label name
document.getElementByClassName (name) find elements by class name
Change HTML elements
element.innerHTML = new html content change element inner HTML
element.attribute = new value of the changed attribute value of the HTML element
element.setAttribute (attribute, value) change the HTML element attribute values
element.style.property = new style change style HTML elements
Add and delete elements
document.createElement (element) to create HTML elements
document.removeChild (element) delete HTML elements
document.appendChild (element) add HTML elements
document.replaceChild (element) replace HTML elements
document.write (text) write HTML elements
Add an event handler
document.getElementById (id) .onclick = function () {code} add an event handler to an onclick event
Find HTML Object
document.anchors
document.applets
document.baseURL
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode
document.documentURL
document.domain
document.domConfig
document.embeds
document.forms
document.head
document.images
document.implementation
document.inputEncoding
document.lastModified
document.links
document.readyState
document.referrer
document.scripts
document.strictErrorChecking
document.title
document.URL
DOM Event Listeners
element.addEventListener(event, function, useCapture);
The first parameter is the type of event (click / mousedown / ...)
The second argument is the function call when the event occurs
The third parameter is a Boolean value that specifies the use of event capture or event bubbling
For chestnut: element.addEventListener ( "click", function () {alert ( "Zlrrr");});
Event capture and event bubbling
There are two events spread in the HTML DOM methods bubbling and capture; event propagation is an element in that order such as <div> tag inside <p> One definition of when an event occurs and when the user clicks <p> So should first which of the click event handler? Bubbling innermost element will be processed first (<p> <div>) in capturing the outermost element will be processed first (<div> <p>) is bubbling useCapture = false Default is true event capture