current position:Home>5. Operation element

5. Operation element

2022-01-27 07:30:31 Bald girl in study

5、 Operational elements

​ JavaScript Of DOM The operation can change the content of the web page 、 Structure and pattern , We can use DOM Manipulate elements to change the contents of elements 、 Properties, etc .( Be careful : These operations are implemented through the attributes of the element object )

1. Change element content ( Get or set )

1550735016756

innerText Change element content

   <button> Display the current system time </button>
    <div> Some time </div>
    <p>123</p>
    <script>
        //  Click button ,div The text will change 
        // 1.  Get elements  
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2. Registration events 
        btn.onclick = function() {
    
            div.innerHTML = getDate();
        }
        function getDate() {
    
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '];
            var day = date.getDay();
            return ' It's today :' + year + ' year ' + month + ' month ' + dates + ' Japan  ' + arr[day];
        }
    </script>
</body>

innerText and innerHTML The difference between

  • The difference in getting content :

​ innerText Will remove spaces and line breaks , and innerHTML Spaces and line breaks are preserved

  • The difference when setting content :

​ innerText Can't recognize html, and innerHTML identifies

Case code

<body>
    <div></div>
    <p>
         I am character. 
        <span>123</span>
    </p>
    <script>
        //  Elements can be added without adding events , Direct change 
        // var p = document.querySelector('p');
        // p.innerHTML = getDate();

        // innerText  and  innerHTML The difference between  
        // 1. innerText  Don't recognize html label   Nonstandard   Will remove spaces and line breaks 
        var div = document.querySelector('div');
        div.innerText = '<strong> It's today :</strong> 2019';
        // 2. innerHTML  distinguish html label  W3C standard   Spaces and line breaks are preserved 
        div.innerHTML = '<strong> It's today :</strong> 2019';
        //  These two properties are readable and writable   You can get the content of the element 
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

2. Attribute operation of common elements

1550735556297

Get the value of the property

Element object . Property name

Set the value of the property

Element object . Property name = value

Case code

<body>
    <button id="ldh"> Lau Andy </button>
    <button id="zxy"> Jacky Cheung </button> <br>
    <img src="images/ldh.jpg" alt="" title=" Lau Andy ">
    <script>
        //  Modify element properties  src
        // 1.  Get elements 
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2.  Registration events   The handler 
        zxy.onclick = function() {
    
            img.src = 'images/zxy.jpg';
            img.title = ' Jacky Cheung ';
        }
        ldh.onclick = function() {
    
            img.src = 'images/ldh.jpg';
            img.title = ' Lau Andy ';
        }
    </script>
</body>

Case study : Time sharing greetings

1550735858049

1550735877145

<body>
    <img src="images/s.gif" alt="">
    <div> Good morning </div>
    <script>
        //  It should be judged according to the different time of the system , So you need to use the date built-in object 
        //  Use multi branch statements to set different pictures 
        //  Need a picture , And modify the picture according to the time , You need to use operation elements src attribute 
        //  Need one div Elements , Show different greetings , Modify the element content 
        // 1. Get elements 
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2.  Get the current number of hours 
        var date = new Date();
        var h = date.getHours();
        // 3.  Determine the number of hours, change pictures and text messages 
        if (h < 12) {
    
            img.src = 'images/s.gif';
            div.innerHTML = ' Pro - , Good morning , Write good code ';
        } else if (h < 18) {
    
            img.src = 'images/x.gif';
            div.innerHTML = ' Pro - , Good afternoon, , Write good code ';
        } else {
    
            img.src = 'images/w.gif';
            div.innerHTML = ' Pro - , Good evening , Write good code ';
        }
    </script>
</body>

3. Attribute operations of form elements

1550736039005

Get the value of the property

Element object . Property name

Set the value of the property

Element object . Property name = value

There are some attributes in form elements such as :disabled、checked、selected, The values of these attributes of the element object are Boolean .

Case code

<body>
    <button> Button </button>
    <input type="text" value=" Input content ">
    <script>
        // 1.  Get elements 
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.  Registration events   The handler 
        btn.onclick = function() {
    
            //  The values in the form   The text is written through  value  To modify 
            input.value = ' By clicking the ';
            //  If you want a form to be disabled   No more clicks  disabled  We want this button  button Ban 
            // btn.disabled = true;
            this.disabled = true;
            // this  It points to the caller of the event function  btn
        }
    </script>
</body>

Case study : Copy Jingdong display password

1550736330331

1550736346822

<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 elements 
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2.  Registration events   The handler 
        var flag = 0;
        eye.onclick = function() {
    
            //  After one click ,flag Be sure to change , When you need to click a button many times, use flag Variable 
            if (flag == 0) {
    
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; //  Assignment operation 
            } else {
    
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }
        }
    </script>
</body>

4. Style property operation

We can go through JS Change the size of the element 、 Color 、 Position, etc .

Commonly used way

1550736488634

The way 1: By manipulating the style attribute

Element object style Property is also an object !

Element object .style. Style attribute = value ;

1550736620181

Case code

<body>
    <div></div>
    <script>
        // 1.  Get elements 
        var div = document.querySelector('div');
        // 2.  Registration events   The handler 
        div.onclick = function() {
    
            // div.style The properties inside   Take the hump nomenclature  
            this.style.backgroundColor = 'purple'; //  Inline style , Weight high 
            this.style.width = '250px';
        }
    </script>
</body>

Case study : Taobao Click to close the QR code

1550736843659

1550736881832

<body>
    <div class="box">
         Taobao QR code 
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1.  Get elements  
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2. Registration events   process 
        btn.onclick = function() {
    
            box.style.display = 'none';
        }
    </script>
</body>

Case study : Loop sprite background

1550736940082

1550736956754

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //  Get all small li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
    
            // Index number multiplication  44  It's every one  li  The background of y coordinate 
            var index = i * 44; // y coordinate 
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

Case study : Show hidden text box content

1550737006593

1550737019729

<body>
    <input type="text" value=" mobile phone ">
    <script>
        // 1. Get elements 
        var text = document.querySelector('input');
        // 2. Registration events   Get focus event  onfocus 
        text.onfocus = function() {
    
                // console.log(' Got the focus ');
                if (this.value === ' mobile phone ') {
    
                    this.value = '';
                }
                //  To get focus, you need to darken the text color in the text box 
                this.style.color = '#333';
            }
            // 3.  Registration events   Loss of focus event  onblur
        text.onblur = function() {
    
            // console.log(' Lost focus ');
            if (this.value === '') {
    
                this.value = ' mobile phone ';
            }
            //  To lose focus, you need to lighten the text color in the text box 
            this.style.color = '#999';
        }
    </script>
</body>

The way 2: By manipulating the className attribute

Element object .className = value ;

because class Is the key word , All use className.

1550737214510

Case code

<body>
    <div class="first"> Text </div>
    <script>
        // 1. element.style be used for   There are few styles or simple functions 
        var test = document.querySelector('div');
        test.onclick = function() {
    
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            //  Change the class name of the current element to  change
            // 2.  By modifying the className Changing the style of an element is suitable for situations with many styles or complex functions 
            // this.className = 'change';
            // 3.  If you want to keep the original class name , Multiple class name selectors can be used 
            this.className = 'first change';
        }
    </script>
</body>

Case study : Password box format prompt error message

1550737269546

1550737284218

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message"> Please enter 6~16 Bit code </p>
    </div>
    <script>
        //  The first event to judge is that the form loses focus  onblur
        //  If the input is correct, the correct information will be prompted. The color is green and the small icon changes 
        //  If the input is not 6 To 16 position , The color of the error message is red   Small icon changes 
        //  Because there are many styles in it , We take className Modify the style 
        // 1. Get elements 
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2.  Registration events   Lose focus 
        ipt.onblur = function() {
    
            //  According to the length of the value in the form  ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
    
                // console.log(' error ');
                message.className = 'message wrong';
                message.innerHTML = ' The number of digits you entered is not required 6~16 position ';
            } else {
    
                message.className = 'message right';
                message.innerHTML = ' Your input is correct ';
            }
        }
    </script>
</body>

1550737354861

copyright notice
author[Bald girl in study],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270730260213.html

Random recommended