Learning JavaScript II--DOM

## DOM Simple Learning: To Meet Case Requirements
* Function: Control the content of html documents
* Get the page label (element) object: Element
* document.getElementById("id value"): Get the element object by its ID

* Operating Element objects:
1. Modify attribute values:
1. Which object is explicitly acquired?
2. Look at the API document and find out which attributes can be set.
2. Modify the contents of labels:
* Attribute: innerHTML
1. Getting Element Objects
2. Modify the contents of tags using innerHTML attributes

## Event Simple Learning
* Function: Some components are executed after certain operations, triggering the execution of some code.
* Sentence-making: XXX is xxx, I will XXX
* After our crystal was destroyed, I blamed my friends.
* When the enemy crystal was destroyed, I praised myself.

* How to Bind Events
1. On the html tag directly, specify the attributes (operations) of the event, and the value of the attributes is the js code.
Event: onclick -- click event

2. Get element objects through js, specify event attributes, and set a function

The following code may better understand the above

<body>
				<img id="light" src="img/off.gif"  οnclick="fun();">
				<img id="light2" src="img/off.gif">
				
				<script>
				    function fun(){
				        alert('I was ordered.');
				        alert('I was ordered again.');
				    }
				
				    function fun2(){
				        alert('How old am I?');
				    }
				
				    //1. Get the light2 object
				    var light2 = document.getElementById("light2");
				    //2. Binding events
				    light2.onclick = fun2;
				
				
				</script>
			</body>

* Case 1: Light switch

Page html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Light switch</title>


</head>
<body id="bg">
    <img id="light" src="img/off.gif">
    <script>
        /*
            Analysis:
                1.Getting Picture Objects
                2.Binding Click Events
                3.Switch pictures with each click
                    *Rules:
                        *If the light is on, switch the picture to off.
                        *If the light is off, switch the picture to on
                    *Complete with flag Tags
         */

        //1. Getting Picture Objects
        var light=document.getElementById("light");
        var flag=false;//The delegate lamp is off.
        //2. Binding Click Events
        light.οnclick=function () {
            if (flag){//Judge that if the light is on, it will go out.
                light.src="img/off.gif";
                flag=false;
                document.getElementById("bg").οnclick=function () {
                    this.style.background="white";
                }
            }else{
                light.src="img/on.gif";
                flag=true;
                document.getElementById("bg").οnclick=function () {
                    this.style.background="#FFFF00";
                }
            }

        }
    </script>

</body>
</html>

The effect is to click on the picture of the lamp, lighten it when it is dark, and the background color of the page turns yellow, turn it gray when it is bright, and turn the page white when it is pressed.

Tags: Attribute

Posted on Mon, 07 Oct 2019 03:51:48 -0700 by gobbly2100