DOM Document Object Model
js has the following functions
JavaScript can change page for all HTML element
JavaScript can change the properties of all HTML pages
JavaScript can change all CSS styles page
JavaScript can react to all events page
(JS can operate inline style, can not operate inline styles and external style)
How to find HTML elements
1: var x = document.getElementById ( " a");
find elements by ID, if the ID = "a" of the element is found, returns in the form of object x, and if not found, then x is null
2: by the tag name Find element
var document.getElementsByTagName X = ( "") []
. 3: lookup by class name element earth element
var document.getElementsByClassName X = ( "");
. 4: the getElementsByName () method returns the object with the specified name is set .
. 5
var = document.querySelector Element (selectors)
returns documents that match the specified selector matched to. among them:
selectors is a string containing one or more CSS selectors, a plurality of comma-separated
element, the return value is a target element (DOM element). When no return value, null is returned
. 6:
var = ElementList document.querySelectorAll (selectors);
selectors is a string containing one or more CSS selectors, separated by commas plurality
ElementList, the return value is a list of elements NodeList.
Property operations
getAttribute: Syntax: element nodes .getAttribute (element attribute name), a function of acquiring an element node specified attribute property values
setAttribute: Syntax: element nodes .setAttribute (element attribute name), functions to create or change an element node attributes
removeAttribute: Syntax : removeAttribute (element attribute name), the function delete elements in the specified element
DOM change HTML elements
document.write output HTML content directly to
change the HTML content innerHTML, innertext. InnerHTML difference between the two can be resolved label, innertext not, if the label will have a selected internal node directly outputs
DOM events (add mode, may be added directly to the event line, can also call a function with the event handler)
when the user when you click the mouse onclick '
onChange event
is triggered onload and onunload event when users enter or leave the page, onload event can be used browser type and version detection visitor's browser, and based on this information to load the correct version of the page.
onmouseover and onmouseout event can be used when the user's mouse is moved over the HTML element or elements out of the trigger function.
onmousedown, onmouseup and onclick constitute a part of all mouse click events. First, when you click the mouse button, the trigger onmousedown event, when the mouse button is released, it will trigger onmouseup event, finally, when the completion of a mouse click, it will trigger the onclick event.
Listen for events:
such as clicking a button when touched:
element.addEventListener (event, function, useCapture) ;
The first parameter is the type (such as "click" or "mousedown") of the event.
The second parameter is the function to call when an event is triggered.
The third parameter is a Boolean value that is used to describe the event bubbling or capture.
Bubbling and capture
insertion elements in div p, the p element to a click event, if a bubble is triggered from inside out, triggered first p element, then trigger the div element
if it is captured, it will first trigger the external elements and then trigger an internal elements. Click div p will trigger first and then trigger p elements
default value is false, the default value is true when a bubbling event is triggered, it will trigger a capture event