DOM操作的案例

一、操作元素的属性

  示例：

<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">百度一下</a>
<button id="btn">点击切换</button>

<script>
//获取元素
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")

//操作元素的属性
btn.onclick = function fn() {
box.innerHTML = "<h1>标题</h1>" //inner对单标签没用
box.innerText = "<h1>标题</h1>" //原样输出
add.value = "input添加内容"     //给input框添加内容
div.innerText = "哈哈哈"        //元素加了可编辑属性后，虽然有输入功能，依然用inner来设计内容
changeimg.src="./img/rose1.jpg.jpg"  //切换图片
a1.href = "http://www.hqyj.com"  //改变链接
a1.style.textDecoration = "none"  //去掉下划线修饰
}
</script>

 效果图：

点击切换后

二、表格隔行变色

   （一）静态隔行变色   

<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>

 效果图：

（二）点击列变色 

<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>

  效果图： 

 （三）点击行变色

<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>
//不用排他思想设计的
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"
      }
}

//用排他思想设计的
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>

  效果图：

  三、点击图片切换页面背景      

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

<script>
//点击切换
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>

 效果图：

 点击第一张图后 

 四、前端表单验证（邮箱示例）

<style>
   #span{
	  visibility: hidden;
	  color: red;
	}
</style>
<div>
    email: <input type="text" id="email"> <br>
    <span id="span">/*邮箱格式错误*/</span>  <br>
    pwd: <input type="password" id="pwd"> <br>
    <br><br>
    <button id="btn">登录</button>
</div>

<script>
   var btn = document.getElementById("btn")
   btn.onclick = function () {
     //获取输入框中的内容
      var email = document.querySelector("#email")
      var ev = email.value
      var pwd = document.querySelector("#pwd")
      var pv = pwd.value
      console.log(email)
      console.log(pwd)
     //验证
      var reg = /^([a-zA-Z0-9_-])+@([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>

  效果图：