What is the DOM?
DOM is a W3C (World Wide Web Consortium) standard, stands for Document Object Model (Document Object Model).
DOM defines a standard for accessing documents:
"W3C Document Object Model (DOM) is a platform- and language-neutral interface that allows programs and scripts to dynamically access, update the content of the document, structure and style."
The W3C the DOM standard is divided into three distinct parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
What is the HTML DOM?
HTML HTML DOM is a standard object model and programming interface. It defines:
As HTML elements object
properties of all HTML elements
method to access all HTML elements of
the event all the HTML elements
in other words: HTML DOM is about how to get, change, add, or delete standard HTML elements.
HTML DOM Document Object
Document object represents your page. If you want to access any element in an HTML page, you always start from accessing the document object.
method
document.getElementById (name) to find elements by selectors id css (id is unique, returns only one element, if the error with a number of id, it would only return the first).
document.getElementsByTagName (name) to find elements by tag name (returns all descendants of the node element tag name, can not find return null)
document.getElementsByClassName (name) to find elements by class name (returns all descendants of nodes the class name of the element, not found return null)
element.attribute = "attribute value" attribute value change HTML element
element.setAttribute (attribute, value) to change the HTML element attribute values
element.style.property = 'attribute value' changing the CSS style values (note single quotes)
document.createElement (element) to create HTML elements
document.removeChild (element) delete HTML elements
document.appendChild (element) add HTML elements
document.replaceChild (element) to replace HTML elements
document.write ( text) written in HTML output stream (re-export the entire page)
document.createTextNode (text) to create a text node, when you add text to an element, you must first create a text node.
element.insertBefore (para, child) was added para child node in front of the node.
HTMLCollection not an array!
It is document.getElementsByTagName (name) and document.getElementsByClassName (name) return value.
HTMLCollection length attribute defines the number of elements
that you can go through the list and reference elements through digital (just as an array)
However, you can not use an array of methods HTMLCollection, such as valueOf (), pop (), push () or join () .
Attributes
document.innerHTML, or alternatively may be used to obtain the content of HTML elements.
document.baseURI return the document to the absolute reference URI
baseURI is a DOMString, on behalf of the base URI of the current node where the document. If you can not get it may return null. This value is read-only, over time.
document.body return <body> element
document.cookie return documents the cookie
document.doctype return the document DOCTYPE
document.documentElement return <html> element
document.documentMode return to the browser use mode
document.documentURI return the document URI of the
the document.domain return domain name server's documentation
document.embeds returns all the <embed> element
document.forms returns all <form> element
document.head return <head> element
document.images returns all <img> element
document.implementation return DOM implementation
document.inputEncoding return documents encoding (character set)
document.lastModified return documents updated date and time
document.links returns all <area> has a href attribute
document.readyState return of the document (load) state
document.referrer returns a reference to the URI (linked documents)
document.scripts returns all <script> element
document.strictErrorChecking return if enforced error checking
document.title return <title> element
document.URL return the full URL of the document
Find HTML elements through CSS selectors
document.querySelectorAll ( "p.intro") returns all class = "intro" p elements, CSS selectors comprises (id, class name, type, attributes, attribute values, etc.)
do not apply to Internet Explorer 8 and earlier version.
document.querySelector (selectors) returns to the first matching element. comprising one or more selectors to match a string selector DOM DOMString. The string must be a valid CSS selector string.
But it does not match the pseudo-element pseudo-class. If used, it does not return anything.
If you want to match the ID or CSS selectors does not comply with the syntax (such as improper use of the colon or space), you have these characters escaped with a backslash.
Because JavaScript, the backslash is the escape character, so when you enter a text string, you must escape it twice (once for the JavaScript string escape, another escape for querySelector):
console.log ( '# foo \\ bar') // "#foo \ bar"
console.log ( '# foo bar \\\\') // "#foo \\ bar"
document.querySelector ( '# foo \\\\ bar ') // div match the first element
document.querySelector ( '# foo: bar' ) // do not match any element
document.querySelector ( '# foo \\: bar ') // match the second div
The selector may be very powerful, as the following example.
Comprising Here, a class attribute of "user-panel main" div element <div> (<div class = "user-panel main">) a name attribute is "login" input element <input> (<input name = "login" />), how to select, as follows:
var el = document.querySelector("div.user-panel.main input[name='login']");
Simple animation using JavaScript:
<Script>
function myMove () {
var elem = document.getElementById ( "Animate");
var POS = 0;
var = the setInterval ID (Frame,. 5); // intermittent call, it will as specified the code interval repeatedly executed until the call is canceled or intermittent page is unloaded.
@ timeout call setTimeout (frame, 5) a function call after a specified time, returns the ID value, time-out call, clearInterval (id) call can be canceled.
Frame function () {
IF (POS == 350) {
the clearInterval (ID); // call canceling the intermittent
} the else {
POS ++;
elem.style.top = + POS "PX";
elem.style.left = + POS "PX ";
}
}
}
</ Script>
Simple HTML attribute value change
<div
style = "background-Color: Red; border: none; width: by 150px; height: 60px; a float: left; padding: 20px; font-size: 25px; Color: #fff;"
the onmouseover = "this.innerHTML = 'Thank you!'"
onmouseout = "this.innerHTML = 'mouse move up!'"
> mouse move up!
</ div>
JavaScript simple variation
<div
style = "background-Color: Red; border: none; width: by 150px; height: 60px; a float: left; padding: 20px; font-size: 25px; Color: #fff;"
the onclick = " ClickMe (the this) "
> click me </ div>
<Script of the type =" the Application / JavaScript ">
function ClickMe (obj) {
IF (obj.innerHTML ==" click me ") {
obj.innerHTML =" click me <br > click again I ";
return;
}
IF (obj.innerHTML ==" Once again, I click on my <br> click ") {
obj.innerHTML =" Thank you ";
return;
}
IF (obj.innerHTML ==" Thank you ") {
obj.innerHTML =" goodbye ";
return;
}
IF (obj.innerHTML ==" bye ") {
obj.style.display = "none";
return;
}
}
</script>
event
document.getElementById ( "myBtn") onclick = function () {};. click event, the function performed later.
onload and onunload event
when the user leaves the page and enter the triggered onload and onunload event.
onload event can be used browser type and version detection visitor's browser, and then based on this information appropriate version to load the page.
onload and onunload event can be used to handle cookie.
onchange event
often used in conjunction with the input field validation.
<input type = "text" id = "fname" onchange = "upperCase ()"> When a user changes the contents of the input field, calls upperCase () function.
onmouseover and onmouseout events
that can be used when the user moves the mouse in or out of an HTML element to trigger a function.
First, when the mouse button is clicked, onmousedown event is triggered;
then when the mouse button is released, onmouseup event is triggered;
and finally, when the mouse click Finish, onclick event is triggered.
onfocus
Fires when the input field gets the focus.
addEventListener () method
element.addEventListener (event, function, useCapture) ;
a first type parameters (such as "click" or "mousedown") event.
The second parameter is a function of when the event occurs we need to call.
The third parameter is a Boolean value that specifies the use of event capture or event bubbling. This parameter is optional.
(Note: Do not use the "on" prefix to the event; please use the "click" instead of "onclick".)
JavaScript HTML DOM navigation
parentNode parent node
childNodes [nodenumber] of several sub-nodes
firstChild The first child node
lastChild The last child node of a
next sibling node nextSibling
a sibling node previousSibling
firstChild, lastChild, nextSibling, previousSibling will be a space or a new line as a node processing, but instead of attributes
so in order to accurately find the corresponding element, will use
firstElementChild, lastElementChild, nextElementSibling, previousElementSibling compatible with the wording, which is the JavaScript own property.
Text node value can be performed by the access node innerHTML property:
. MyTitle var = document.getElementById ( "Demo") innerHTML;
access nodeValue innerHTML property equivalent to access the first child node:
var = myTitle document.getElementById ( "Demo") .firstChild.nodeValue;
may access the first child node such:
. myTitle var = document.getElementById ( "Demo") the childNodes [0] .nodeValue;
nodeName property specifies the name of the node.
nodeName is a read-only
nodeName element node is equal to the label name (uppercase)
property node nodeName is the name of the attribute
nodeName text node always #text
nodeName document node always #document
nodeValue property value of a predetermined node.
NodeValue element node is undefined
nodeValue text node is the text in the text
nodeValue attribute node is an attribute value
The most important attribute is nodeType:
Node Type example
ELEMENT_NODE 1 <h1 class = "heading "> W3School </ h1> ( element)
ATTRIBUTE_NODE 2 class = "heading" (Properties) (deprecated in the HTML DOM in .XML DOM not abandoned).
a TEXT_NODE W3Schools. 3 (text)
COMMENT_NODE. 8 <-! this is a comment -> (Note)
DOCUMENT_NODE the HTML document itself. 9 (<html> element in the parent document)
DOCUMENT_TYPE_NODE 10 (document type <doctype html!> )