js operation elements and case demonstration

Operation element

  • The DOM operation of JavaScript can change the content, structure and style of web pages. We can use DOM operation elements to change the content and attributes of elements. Note that the following are attributes

Change element content

<body>
    <div></div>
    <p>
        I am writing
        <span>123</span>
    </p>
    <script>
        //The difference between innerText and innerHTML
        //1.innerText does not recognize html tags. Non standard spaces and line breaks are removed
        var div = document.querySelector('div');
        //Div.innertext = '< strong > today is: < / strong > 2019';
        //2.innerHTML recognizes HTML tags, and W3C standard reserves spaces and line breaks
        div.innerHTML = '<strong>Today is:</strong> 2021';
        //These two attributes are readable and writable, and you can get the contents of the element
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

4.2 attribute operation of common elements

<body>
    <button id="C">C language</button>
    <button id="CPP">C++language</button><br>
    <img src="../images/C.jpg" alt="" title="C language">

    <script>
        //Modify element attribute src
        //1. Get element
        var C = document.getElementById('C');
        var CPP = document.getElementById('CPP');
        var img = document.querySelector('img');

        //2. Registration event
        C.onclick = function(){
            img.src = '../images/C.jpg';
            img.title = 'C language'
        }
        CPP.onclick = function(){
            img.src = '../images/CPP.jpg';
            img.title = 'C++'
        }
    </script>
</body>

The effects are as follows:

Case: display different pictures and greetings in time sharing

According to different times, the page displays different pictures and different greetings at the same time.
If you open the page at morning time, good morning is displayed, and the picture of morning is displayed.
If you open the page in the afternoon, good afternoon is displayed and the picture of afternoon is displayed.
If you open the page at night, it will show good evening and show the picture of evening.

Case study:

It is determined according to different time of the system, so the date built-in object is required
Using multi branch statements to set different pictures requires a picture, and modifying the picture according to time requires the src attribute of the operation element
You need a div element to display different greetings. You can modify the content of the element

 <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="../images/C.jpg" alt="">
    <div>Good morning</div>
    <script>
        //1. Get element
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //2. Get the current hours
        var date = new Date();
        var h =date.getHours();
        //3. Judge the change of hours
        if(h <12){
            img.src = '../images/C.jpg';
            div.innerHTML = 'Good morning, dear. Write the code well';
        }else if(h<18){
            img.src = '../images/CPP.jpg';
            div.innerHTML = 'Good afternoon, dear. Write the code well';
        }else{
            img.src = '../images/JS.jpg';
            div.innerHTML = 'Good evening, dear. Write the code well';
        }
    </script>
</body>

4.3 attribute operation of form elements

  • Using DOM, you can manipulate the attributes of the following form elements
<body>
    <button>Button</button>
    <input type="text" value="Input content">

    <script>
        //1. Get element
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2. Register event handlers
        btn.onclick = function(){
            // input.innerHTML = 'clicked'; This is an ordinary box, such as the content in the div tag
            // The value text content in the form is modified through value
            input.value = 'It was clicked';
            //If you want a form to be disabled and can no longer click, you can use disabled. We want this button to be disabled
            // btn.disabled = true;
            this.disabled = ture;
            //this points to the caller of the event function
        }
    </script>
</body>

Case: prevent JD from displaying password

  • Click the button to switch the password box to a text box, and you can view the password plaintext.

Case study:

① Core idea: click the eye button and change the password box type to text box to see the password inside

② One button has two states. Click once to switch to the text box. Continue to click once to switch to the password box

③ Algorithm: use a flag variable to judge the value of flag. If it is 1, switch to text box, flag is set to 0, if it is 0, switch to password box, flag is set to 1

<style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="../images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1. Get element
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //2. Register event handlers
        var flag = 0;
        eye.onclick = function(){
            //The flag must change after one click
            if(flag ==0){
                pwd.type = 'text';
                eye.src = '../images/open.png';
                flag = 1;
            }else{
                pwd.type = 'password';
                eye.src = '../images/close.png';
                flag = 0;
            }
        }
    </script>
</body>

4.4 style attribute operation

  • We can modify the size, color, position and other styles of elements through JS
<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //1. Get element
        var div = document.querySelector('div');
        //2. Register event handlers
        div.onclick =function(){
            //The attributes in div.style adopt hump naming method
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
    
</body>

be careful:

1. The style in JS adopts hump naming method, such as fontsize and backgroundColor

2.JS modifies the style operation to generate inline styles with high css weight

Case: click Taobao to close QR code

When the mouse clicks the QR code close button, the whole QR code will be closed

Case study:

① Core idea: use the display and hiding of styles to complete. display.none hides the elements. display:block displays the elements
② Click the button to hide the QR code box

<style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: center;
            color: red;
            /* display: block; */
        }
        .box img{
            width: 60px;
            margin-top: 5px;
        }
        .close-btn{
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        Taobao QR code
        <img src="../images/C.jpg" alt="">
        <i class="close-btn"></i>
    </div>
    <script>
        //1. Get element
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2. Register event handler
        btn.onclick = function(){
            box.style.display = 'none';
        }
    </script>
</body>

To be continued

Tags: Javascript Front-end

Posted on Sun, 05 Dec 2021 19:54:51 -0500 by phpwannabe25