Example: registering an event for an element

    <input type="button" value="separate html" id="btn1"/>   

You can get the button first, and then register the event

    <script>
        //Get elements from the document based on the value of the id attribute
        var btnObj=document.getElementById("btn");
        //Register the click event for the current button (object) and add the event handler (anonymous function).
        btnObj.onclick=function(){
            alert("Oh");
        }
    </script>

The above can also be simplified into

    <script>
        document.getElementById("btn1").onclick=function(){
            alert("Oh")
        }
    </script>

Example: click the button to display and resize the picture

    <input type="button" value="display picture" id="btn"/>
    <img src="(Picture path omitted)" alt="" id="pic"/>
    <script>
        //When clicking the button, set the src attribute of the img tag to have a path for the image
        //Get button by id
        var btnObj=document.getElementById("btn");
        //Register click event for button and add event handling function
        btnObj.onclick=function(){
            //Get the label of the picture according to the id and set the src value of the picture
            var imgObj=document.getElementById("pic");
            imgObj.src="(Picture path omitted)";
            imgObj.width="300";
            imgObj.height="200";
        }
    </script>

Example: click the button to modify the display content of the p tag

    <input type="button" value="Set up p Content" id="btn">
    <p id="p1">This is a p</p>
    <script>
        //The property innerText is used when setting pairs of labels and middle text content
        //Get the button according to the id, register the click event for the button, and add the event handling function
        document.getElementById("btn").onclick=function(){
            //Get p tag according to id
            document.getElementById("p1").innerText="This is p Label";
        };
    </script>

Example: click the button to modify the address and hot text of label a

    <input type="button" value="Display effect" id="btn">
    <a href="http://www.baidu.com" id="changeWords">Baidu</a>
    <script>
        document.getElementById("btn").onclick=function(){
            //Get hyperlink according to id, and set the attribute of href
            var aObj=document.getElementById("changeWords");
            aObj.href="http://www.csdn.net";
            aObj.innerText="CSDN";
        };
    </script>

Example: click the button to set the text content of multiple p labels

    <input type="button" value="Display effect" id="btn"/>
    <div id="dv1">
        <p>wxy Idot</p>
        <p>wxy Idot</p>
        <p>wxy Idot</p>
        <p>wxy Idot</p>
        <p>wxy Idot</p>
        <p>wxy Idot</p>
    </div>
    <div id="dv2">
        <p>wxy Big fool</p>
        <p>wxy Big fool</p>
        <p>wxy Big fool</p>
        <p>wxy Big fool</p>
    </div>
    <script>
        //document.getElementsByTagName("tagName"); returns a dummy array
        //No matter what you get is a label or multiple labels, they are ultimately stored in an array. The return value of this line of code is an array

        //According to the id get button, register the click event and add the event handling function
        document.getElementById("btn").onclick=function(){
            var pObj=document.getElementById("dv1").getElementsByTagName("p");            
            for(var i=0;i<pObj.length;i++){
                pObj[i].innerText="You are right";
            }
        };
    </script>

Example: click the button to modify the alt and title attributes of the picture

<input type="button" value="Display effect" id="btn">
<img src="Pretend to have a picture" alt="Ha-ha" title="Hey">
<script>
    document.getElementsByTagName("btn").onclick=function(){
        //The index should be 0 because it returns a pseudo array
        var imgObj=document.getElementsByTagName("img");
        imgObj[0].alt="Changed";
        imgObj[0].title="display";
    }
</script>

Example: click the button to modify the value of multiple text boxes

    <input type="button" value="Modify the value of the text box" id="btn"></br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <input type="text" value=""/><br>
    <script>
        //Get the button according to the id, register the click event for the button, and add the event handling function
        document.getElementById("btn").onclick=function(){
            //Get all text boxes
            var allinputs=document.getElementsByTagName("input");
            for(var i=0;i<allinputs.length;i++){
                //Determine whether this element is a button
                if(allinputs[i].type!="button"){
                    allinputs[i].value="wxy Big fool";
                }
            }
        }
    </script>

Example: click each picture to pop up a dialog box

    <img src="image/1.jpg" alt="" id="img1">
    <img src="image/2.jpg" alt="" id="img2">
    <img src="image/3.jpg" alt="" id="img3">
    <script>
        //Get the image tag according to the tag name and register the click event respectively
        var imgOgjs=document.getElementsByTagName("img");
        //Loop through the array, get each picture label, register click event, and add event handling function
        for (var i=0;i<imgObjs.length;i++){
            imgOgjs[i].onclick=function(){
                alert("Clicked");
            };
        }
    </script>

Example: click the button to modify the value attribute

    <input type="button" value="Button" id="btn"/>
    <script>
        //In the event of an element, this in its own event is the current element object
        var btnObj=document.getElementById("btn");
        btnObj.onclick=function(){
            this.value="I am the button.";
            this.type="text";
            this.id="text";
        }
    </script>