- 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> <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> Taobao QR code <img src="../images/C.jpg" alt=""> <i></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