DOM operation cases

One 、 Properties of the operation element

   Example ：

<div id="box">hello</div>
<input type="text" name="" id="add">
<div contenteditable="true" id="div">123</div>
<img src="./img/rose.jpg" id="changeimg">
<a href="http://www.baidu.com" id="a1"> use Baidu Search </a>
<button id="btn"> Click to switch </button>

<script>
// Get elements 
var btn = document.querySelector("#btn")
var box = document.querySelector("#box")
var add = document.querySelector("#add")
var div = document.querySelector("#div")
var changeimg = document.querySelector("#changeimg")
var a1 = document.querySelector("#a1")

// Properties of the operation element 
btn.onclick = function fn() {
box.innerHTML = "<h1> title </h1>" //inner It's useless for single labels 
box.innerText = "<h1> title </h1>" // Original output 
add.value = "input Add content "     // to input Box add content 
div.innerText = " Ha ha ha "        // After adding editable attributes to the element , Although it has input function , Still use inner To design content 
changeimg.src="./img/rose1.jpg.jpg"  // Switch pictures 
a1.href = "http://www.hqyj.com"  // Change link 
a1.style.textDecoration = "none"  // Remove the underline decoration 
}
</script>

  design sketch ：

Click to switch

Two 、 The color of the table is different from each other

   （ One ） Static interlaced discoloration    

<table border="1" style="width: 500px; height:200px; ">
 <tbody id="all" style="background-color:blue;">
  <tr id="color">
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr id="color">
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr id="color">
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr id="color">
     <td></td>
     <td></td>
     <td></td>
  </tr>
 </tbody>
</table>

<script>
var tr = document.querySelector('#all')
var arr = tr.children
console.log(arr)
for (let i = 0; i < arr.length; i++) {
     console.log(i)
     if (i % 2 == 0) {
     arr[i].style.backgroundColor = "pink"
     }

}
console.log(tr.indexof1())
</script>

  design sketch ：

（ Two ） Click on the column to change color  

<table border="1" style="width: 500px; height:200px;" id="tb">
  <tbody>
    <tr id="tr">
        <td id="td"></td>
        <td id="td"></td>
        <td id="td"></td>
    </tr>
<tr id="tr">
        <td id="td"></td>
        <td id="td"></td>
        <td id="td"></td>
    </tr>
<tr id="tr">
        <td id="td"></td>
        <td id="td"></td>
        <td id="td"></td>
    </tr>
<tr id="tr">
        <td id="td"></td>
        <td id="td"></td>
        <td id="td"></td>
    </tr>
 </tbody>
</table>

<script>
var tb = document.querySelector("#tb")
var trs = document.querySelectorAll("#tr")
var tds = document.querySelectorAll("#td")
console.log(tds)
for (let i = 0; i < tds.length; i++) {
   tds[i].onclick = function () {
     tds.forEach((el) => {
           el.style.backgroundColor = "white"
     })
    let x = tds[i].indexof1()
    trs.forEach((el) => {
          el.children[x].style.backgroundColor = "aquamarine"
   })
 }
}
</script>

  design sketch ： 

 （ 3、 ... and ） Click line color change

<table border="1" style="width: 500px; height:200px;" id="tab">
   <tbody id="">
     <tr id="trs">
         <td id="tds"></td>
         <td id="tds"></td>
         <td id="tds"></td>
     </tr>
     <tr id="trs">
         <td id="tds"></td>
         <td id="tds"></td>
         <td id="tds"></td>
     </tr>
     <tr id="trs">
         <td id="tds"></td>
         <td id="tds"></td>
         <td id="tds"></td>
     </tr>
     <tr id="trs">
         <td id="tds"></td>
         <td id="tds"></td>
         <td id="tds"></td>
     </tr>
  </tbody>
</table>

<script>
// There is no need for exclusive design 
var tab = document.querySelector("#tab")
var trs = document.querySelectorAll("#trs")
var flag = 0
for (let i = 0; i < trs.length; i++) {
      trs[i].onclick = function () {
           trs[flag].style.backgroundColor = "white"
           flag = i
           trs[i].style.backgroundColor = "green"
      }
}

// Designed with exclusive thought 
var trs = document.querySelectorAll("#trs")
for (let i = 0; i < trs.length; i++) {
   trs[i].onclick = function () {
        trs.forEach((el) => {
              el.style.backgroundColor = "white"
    })
    trs[i].style.backgroundColor = "green"
   }
 }
</script>

  design sketch ：

  3、 ... and 、 Click the picture to switch the page background       

<img src="./img/rose.jpg" id="changebgc1">
<img src="./img/rose1.jpg" id="changebgc2">
<img src="./img/rose2.jpg" id="changebgc3">

<script>
// Click to switch 
var imgs = document.querySelectorAll("img")
var flag = 0
for (let i = 0; i < imgs.length; i++) {
       imgs[i].onclick = function () {
            if (flag == 0) {
                 document.body.style.backgroundImage = `url("${imgs[i].src}")`
                 flag = 1
            } else if (flag == 1) {
                 document.body.style.backgroundImage = "none"
                 flag = 0
            }
      }
}
</script>

  design sketch ：

  Click on the first picture  

  Four 、 Front end form validation （ Mailbox example ）

<style>
   #span{
	  visibility: hidden;
	  color: red;
	}
</style>
<div>
    email: <input type="text" id="email"> <br>
    <span id="span">/* Mailbox format error */</span>  <br>
    pwd: <input type="password" id="pwd"> <br>
    <br><br>
    <button id="btn"> Sign in </button>
</div>

<script>
   var btn = document.getElementById("btn")
   btn.onclick = function () {
     // Get the contents of the input box 
      var email = document.querySelector("#email")
      var ev = email.value
      var pwd = document.querySelector("#pwd")
      var pv = pwd.value
      console.log(email)
      console.log(pwd)
     // verification 
      var reg = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if(reg.test(ev)) {
             email.style.border = "1px green solid"
             document.querySelector("#span").style.visibility="hidden"
      }else{
             email.style.border = "1px red solid"
             document.querySelector("#span").style.visibility="visible"
     }
}
</script>

  design sketch ：