11. Dom Extensions.

1.the querySelector()

    var body = document.querySelector("body"); // get body element

    var myDiv = document.querySelector("#myDiv"); // get ID of "myDiv"

    var selected = document.querySelector(".selected") // get class of "selected"

    var img = document.body.querySelector("img.button")//

2. the querySelectorAll()

    var ems = docment.getElementById("myDiv").querySelectorAll("em");

    // get all <em> elements in a <div> myDiv

    var selecteds = docment.querySelectorAll(".selected");

    var i,len,strong;

    

var i,len,selected.
for(i=0, len=selecteds.length i<len; i++){
     selected = selecteds[i];
     selected.calssName = "important";
}

 

</script>
<input type=”button” value=”Click Me” onclick=”showMessage()” />

<!-- outputs “click” -->
<input type=”button” value=”Click Me” onclick=”alert(event.type)”>

<!-- outputs “Click Me” -->
<input type=”button” value=”Click Me” onclick=”alert(this.value)”>

<form method=”post”>
<input type=”text” name=”username” value=””>
<input type=”button” value=”Echo Username” onclick=”alert(username.value)”>
</form>

<input type=”button” value=”Click Me” onclick=”try{showMessage();}catch(ex){}”>

 

.

Dom level 0 Event Handlers.

each element(as well as window and document) has event handler propereties. such as onclick.

var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(“Clicked”);
};

var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(this.id); //”myBtn”
};

btn.onclick = null; // remove event handler

 

 

Dom level 2 event handler.

addEventListener() and removeEventListener().

var btn = document.getElementById("mybtn");
btn.addEventListener("click",function(){
   alert(this.id);
},false);   // false means  bubbling 
               // else means capture.

var handler = function(){
alert(this.id);
};
btn.addEventListener(“click”, handler, false);
//other code here
btn.removeEventListener(“click”, handler, false); //works!

var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
btn.attachEvent(“onclick”, function(){
alert(“Hello world!”);
});

var btn = document.getElementById(“myBtn”);
var handler = function(event){
switch(event.type){
case “click”:
alert(“Clicked”);
break;
case “mouseover”:
event.target.style.backgroundColor = “red”;
break;
case “mouseout”:
event.target.style.backgroundColor = “”;
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;