Dom对象总结案例实操(第二十课)

今天文章有点长

第一部分:回顾之前Dom对象我用了四篇文章对他进行了分开讲述Dom对象的用途,今天用几个案例实操一下.

之前我们Dom对象中了解过下面的内容

1. Dom对象的定义?
2. Dom对象的节点操作，了解到了父节点 子节点  第一个 子节点 最后一个子节点 兄弟节点？
3. Dom元对象的操作，了解到了 元素的节点 同样元素与元素之间页D存在关系  我们了解到Dom元素之间的关系 表格元素中的关系 表单元素之间的关系？
4. Dom对象的属性和方法 了解到了这些语法是如何使用的？
5. Dom对象自定义的属性操作 对attribute的属性的增删改查？
6. Dom对象是如何自定义属性的？
7. Dom对象元素的属性修改？
8. Dom对象中动态的style样式的增删改查？
9. 了解Dom中的文档对象？
10. 了解了window对象的使用？
11. Dom对象的基础事件？
12. Dom对象的事件冒泡？

第二部分  Domd对象博客文章的链接

1. JS(DOM)第十五课_星辰镜的博客-CSDN博客
2. JS(Dom对象的属性和方法)第十六课_星辰镜的博客-CSDN博客
3. JS(Dom操作)第十八课_星辰镜的博客-CSDN博客
4. JS(Dom事件操作)第十九_星辰镜的博客-CSDN博客

第三部分 Dom对象知识点回顾 效果不去展示重点在后面的案例上

Demo1 Dom元素中的节点操作和方法操作

我是标题有些节点操作你知道吗
我是div元素的信息
我是一个段落标签
我是第二个段落标签
我是Span元素的镖旗
我是thead的元素的内容123
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
我是nav_li元素
2
我是li标签
我是li标签
我是li标签
4
5
1
我是id选择器
3
4
5
我是caption的元素内容
短信验证码登录页面
短信验证手机
快速注册

重点代码

    // 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);var nav_li = document.getElementsByClassName('nav_li')console.log(nav_li)// 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);

Demo2 attribute的操作 对属性的增删改查

 重点代码
 

// 判断该属性是否age存在var flag = classEl.hasAttribute("age")// 获取某个值var name = classEl.getAttribute("name")console.log(name)// 设置元素的值
var setName = classEl.setAttribute("setName", "我是设置的元素值")
var getName = classEl.getAttribute("setName")
console.log("获取姓名为"+getName)// 删除属性值元素var delteName = classEl.removeAttribute("setName")console.log(delteName)

Demo3 classlist使用动态的对类名增伤改查

点我我是一个增加class选择器的类名
123 

重点代码

  document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");document.getElementById("myDIV").classList.remove("mystyle");document.getElementById("myDIV").classList.toggle("newClassName");var x = document.getElementById("myDIV").classList.contains("anotherClass");console.log(x)var y = document.getElementById("myDIV").classList.contains("mystyles");console.log(y)

Demo4 自己定义属性值

我是属性值的内容信息

Demo5 元素的属性修改

我是元素修改的属性信息

Demo6 Dom对象的基础事件

我是用户的单机事件我是用户的鼠标两次单机的事件键盘抬起鼠标移入事件

Demo7 Dom事件的冒泡

我是div我是span
我是p标签的内容信息

Demo8 Dom对象事件捕获

我是div我是span
我是p标签的内容信息

重点代码

  body.addEventListener("click", function (e) {console.log(this)// 判断该事件的类型console.log(e.type) //客户端的x y的距离console.log(e.clientX, e.clientY)// 处理的事件是当前处理的事件是什么console.log(e.target)   //当前处理事件console.log(e.currentTarget)  //当前处理事件console.log(e.eventPhase)      //事件所处在的阶段console.log(e.offsetX, e.offsetY)  //事件发生的元素内console.log(e.pageX, e.pageY)   //事件发生在document的位置console.log(e.screenX, e.screenY)  // 相对屏幕的位置}, true)

第四部分 案例实操

案例一 案例一轮番消息 HTml+CSS结构

 function all() {
   console.log("执行函数信息")
   // 调用函数
   FenZhuang()
 }
 function FenZhuang() {
   // 创建数组  在数组中创建对象 
   var user = [
     {
       Name: '我叫上三对这张图片感兴趣哦',
       imgUrl: './img/1.jpeg'
     },
     {
       Name: '我叫上四对这张图片感兴趣哦',
       imgUrl: './img/2.jpeg'
     },
     {
       Name: '我叫上五对这张图片感兴趣哦',
       imgUrl: './img/3.jpeg'
     },
     {
       Name: '我叫上六对这张图片感兴趣哦',
       imgUrl: './img/4.jpeg'
     },
   ]
   // 获取图片的信息
   var img = document.querySelector("img")
   console.log(img)
   // 获取div的信息
   var div = document.querySelector(".tip_bar")
   console.log(div)
   // 获取Span元素信息
   var span = document.querySelector("span")
   console.log(span)
   var i = 1
   setInterval(function () {
     img.src = user[i].imgUrl
     // 改变图片的地址
     var imghu = div.style.backgroundImage = `url("${user[i].imgUrl}")`
     console.log(imghu)
     span.textContent = user[i].Name
     i++
     if (i == user.length) i == 0
   }, 1000)
 }
 all()

 案例二 案例二表格转动 

首页
车票  ∨
团购服务  ∨
会员服务  ∨
车站服务  ∨
商旅服务  ∨
出行指南  ∨
信息查询  ∨

  // 获取ul
  var ulEl = document.querySelector("ul")
  // 获取到当前高亮的元素
  var activeEl = ulEl.children[0]
  var flag = false
  // console.log(activeEl);
  // 绑定鼠标移入事件
  ulEl.onmouseover = function (e) {
      // 判断是否点击的是li元素
      if (e.target !== this) {
          // 是否有高亮，有就删除
          if (activeEl) activeEl.classList.remove("active")
          // 给当前移入的元素添加高亮
          e.target.classList.add("active")
          var spanEl = e.target.firstElementChild
          if (spanEl) spanEl.style.transform = `rotate(-180deg)`
          // 赋值给下一次需要删除的高亮元素
          activeEl = e.target
      }
  }
  ulEl.onclick = function (e) {
      // 判断是否点击的是li元素
      if (e.target !== this) {
          // 是否有高亮，有就删除
          if (activeEl) activeEl.classList.remove("active")
          // 给当前移入的元素添加高亮
          e.target.classList.add("actives")
          var spanEl = e.target.firstElementChild
          if (spanEl) spanEl.style.transform = `rotate(-180deg)`
          // 赋值给下一次需要删除的高亮元素
          activeEl = e.target
      }
  }
  // 给li绑定移出事件
  ulEl.onmouseout = function (e) {
      var spanEl = e.target.firstElementChild
      if (e.target.tagName === "LI") {
          if (spanEl) spanEl.style.transform = `rotate(0deg)`
      }
  }

案例三 案例三轮播图

    // 获取文字中的ul
    var UlTitleList = document.querySelector(".title-list")
    // 获取高亮的元素
    var ItemActive = document.querySelector(".active")
    // 获取图片的内容信息
    var UlImgeList = document.querySelector("img")
    
    // 当鼠标移入后要改变什么事件
    UlTitleList.onmouseover = function (e) {
        if (e.target.parentElement.classList.contains("item")) {
            if (ItemActive) ItemActive.classList.remove("active")
            // 加上高亮效果
            e.target.parentElement.classList.add("active")
            ItemActive = e.target.parentElement
            setInterval(function(){
            },2000)
            var index = Array.from(this.children).findIndex(function (item) {
                return item === e.target.parentElement
            })
            UlImgeList.src = `./img/${index + 1}.jpeg`
        }
    }

 案例四 案例四侧边栏

购物车
收藏
限时活动
大礼包

  var iconlist=document.querySelectorAll(".icon")
  for(var i=0;i
      var icon=iconlist[i]
      icon.style.backgroundImage=`url("./img/${i+1}.svg")`
  }
  var toolBael=document.querySelector(".tool-bar")
  console.log(toolBael)
  toolBael.οnmοuseοver=function(e){
      OnmouseoverAndOnmouseOutAll(e,62,100,1)
  }
  toolBael.οnmοuseοut=function(e){
      OnmouseoverAndOnmouseOutAll(e,0,200,10)
 }
  
  function OnmouseoverAndOnmouseOutAll(e,width,height){
      // 执行的功能
      if(e.target!==e.currentTarget){
          // 什么事 件改变盒子的宽度
          if(e.target.classList.contains("item")){
              e.target.children[0].style.width=`${width}px`
              e.target.children[0].style.height=`${height}px`
              e.target.children[0].style.margin=`${margin}px`
              
          }else{
              e.target.parentElement.children[1].style.width=`${width}px`
              e.target.parentElement.children[1].style.height=`${height}px`
              e.target.parentElement.children[1].style.margin=`${margin}px`
          }
      }
  }