lookup HTML element
- var x=document.getElementById("main");
- var y=x.getElementsByTagName("p");
- var x=document.getElementsByClassName("intro");
HTML DOM
document.getElementById(id).innerHTML=New HTML
document.getElementById(id).attribute=New attribute value
CSS DOM
document.getElementById(id).style.property=New style
HTML DOM events
Onclick, onload and onload, onchange, onmouseover and onmouseout, onmousedown, onmouseup and onclick
HTML DOM EventListener event listening
- element.addEventListener(event, function, useCapture);
The first parameter is the type of event (such as "click" or "mousedown")
The second parameter is the function that is called after the event is triggered.
The third parameter is a Boolean value that describes whether the event is bubbling or catching. This parameter is optional.
element.addEventListener("click", function(){ alert("Hello World!"); }); - Add multiple event handles to the same element
The addEventListener() method * * allows multiple events to be added to the same element without overwriting existing events * *:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>This instance uses addEventListener() Method to add two click events to the same button.</p>
<button id="myBtn">Point me</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
Event bubbling or event capture
Bubbling: change the inner layer first
Capture: edge first outer layer
The default value is false, i.e. bubble passing. When the value is true, the event is passed using capture.
document.getElementById("myDiv").addEventListener("click", myFunction, true);
function someOtherFunction() {
alert ("function executed!")
}
removeEventListener() Method
removeEventListener() Method remove by addEventListener() Event handle added by method:
element.removeEventListener("mousemove", myFunction);
Cross browser solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p> Internet Explorer 8 And earlier IE Version not supported addEventListener() Method.</p>
<p>This example demonstrates a solution that is compatible with all browsers.</p>
<button id="myBtn">Point me</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
x.attachEvent("onclick", myFunction);
}
function myFunction() {
alert("Hello World!");
}
</script>
</body>
</html>
HTML DOM element (node)
Create new HTML element (node) - appendChild()
document.getElementById("div1").appendChild(document.createElement("p"));
*** insertBefore()***
removeChild()
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
***replace HTML element - replaceChild() ***