Day2 DOM元素的操作

2301_765347542024-03-08 10:04
2.1 操作元素样式属性

1.通过 JS 设置/修改标签元素的样式属性

  • 比如通过轮播图小圆点自动更换颜色样式

  • 点击按钮可以滚动图片这是移动的图片的位置 left 等等

2.通过 style 属性操作 CSS

1.语法：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
​
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 为盒子设置初始样式 -->
<style>
.box {
width: 300px;
height: 300px;
margin: 50px auto;
background-color: antiquewhite;
}
</style>
</head>
​
<body>
<!-- 定义一个盒子 -->
<div class="box"></div>
<script>
// 获取元素
const box = document.querySelector('.box')
// 修改样式属性 对象.style.样式属性 = '值'  需要跟单位,如px
box.style.width = '600px'
// 遇到多组单词,使用小驼峰命名法
box.style.backgroundColor = 'hotpink'
</script>
</body>
​
</html>

2.注意：

  • 修改样式通过 style 属性引出

  • 如果属性有 - 连接符，需要转换为小驼峰命名法

  • 赋值的时候，需要的时候不能忘记加CSS单位

3.案例：页面刷新，随机更换背景图片

html 复制代码 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刷新背景图片</title>
    <style>
          /* css样式 */
        body {
            background-image: url(../11.8/homework/1.webp);
        }
    </style>
</head>
​
<body>
    <script>
        /*
        需求:当我们刷新页面,页面中的背景图片随机显示不同的图片
        分析:
            1.需要使用随机函数
            2.css页面背景图片 background-image
            3.标签选择body,因为body是唯一的标签,可以直接写document.body,style
        */
        let num = Math.floor(Math.random() * 21)
        document.body.style.backgroundImage = `url(../11.8/homework/${num}.webp)`
    </script>
</body>
​
</html>

3.操作类名（className）操作CSS

1.如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式

2.语法：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
​
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>className</title>
<style>
/* 原始样式 */
div {
   width: 200px;
   height: 200px;
   margin: 60px auto;
   background-color: aqua;
}
​
/* className待用样式,注意:调用后只会覆盖重复的,不会删除原始样式 */
.box {
   width: 600px;
   height: 600px;
   background-color: pink;
}
</style>
</head>
​
<body>
<div></div>
<script>
// className语法
// 1.获取元素
const div = document.querySelector('div')
// 2.添加类名
div.className = 'box'
// 3.如果原本元素有class属性,需要保留
div.className = '初始class名 新增的class名'
</script>
</body>
​
</html>

3.注意：

  • 由于class是关键字，所以使用className去代替

  • className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

2.2 this指向

  • 在事件处理函数中，this指向事件源

  • 在全局作用域下，this指向window

html 复制代码 
<body>
  <div class="box">点击我这个盒子吧</div>
  <button>按钮</button>
  <script>
    let box = document.querySelector('.box')
    let btn = document.querySelector('button')
    box.onclick = function () {
      this.style.width = '100px'
      this.style.height = '100px'
      this.style.backgroundColor = 'pink'
    }
    // 错误使用
    btn.onclick = function () {
      // 这里的this指的是按钮
      this.style.width = '100px'
      this.style.height = '100px'
      this.style.backgroundColor = 'pink'
    }
  </script>
</body>
2.3 通过className添加样式

  • 语法：元素对象.className='新类名 旧类名'

    通过className添加的是类名，该类名是已经存在的，会覆盖原来的类名，所以要把原来的类名一起写进去

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      color: skyblue;
      background-color: pink;
    }
​
    .new {
      background-color: grey;
    }
  </style>
</head>
​
<body>
  <div class="box">旋风小子</div>
  <script>
    let box = document.querySelector('.box')
    let flag = true
    box.onclick = function () {
      if (flag) {
        this.className = 'new box'
        flag = !flag
      } else {
        this.className = 'box'
        flag = !flag
      }
    }
  </script>
</body>
​
</html>
2.4 排他操作

  • js分同步和异步

    排他思想：清楚全部样式，在给自己添加样式

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
  </ul>
  <script>
    let li=document.querySelectorAll('li')
    for(let i=0;i<li.length;i++){
      li[i].onclick=function(){
        for(let j=0;j<li.length;j++){
            // 清楚全部样式                 
          li[j].style.backgroundColor=''
        }
           // 给自己添加样式
        this.style.backgroundColor='green'
      }
    }
  </script>
</body>
</html>
2.5 自定义属性的获取和设置

  • 获取自定义属性-----元素.getAttribute('自定义属性名')，自定义属性名怎么写就怎么拿，可以获取元素自带的属性

  • 设置自定义属性-----元素.setAttribute('自定义属性名','值')

  • 移除自定义属性-----元素.removeAttribute('自定义属性名')

  • 自己定义属性时，统一为data-xxx=' '

html 复制代码 
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 300px;
    }
  </style>
</head>
​
<body>
  <div class="box" index="1" date-name="自定义属性值"></div>
  <img src="../images/轮播图1.jpg" alt="">
  <script>
    /* 
    自定义属性的获取和设置
    */
    let box = document.querySelector('.box')
    let img=document.querySelector('img')
    // 获取自定义属性-----元素.getAttribute('自定义属性名')，自定义属性名怎么写就怎么拿，可以获取元素自带的属性
    console.log(box.getAttribute('index'))  //1
    console.log(box.getAttribute('date-name'))  //自定义属性值
    // 设置自定义属性-----元素.setAttribute('自定义属性名','值')
    img.setAttribute('设置的自定义属性名','自定义属性值')
    // 移除自定义属性-----元素.removeAttribute('自定义属性名')
    img.removeAttribute('设置的自定义属性名')
  </script>
</body>
​
</html>
2.6 常用的事件

  • onblur:失去焦点

    onchange:内容发生改变

    onfocus:内容改变

    oninput:内容变化就会触发

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
​
<body>
  <input type="text">
  <div>输入的姓名是：
    <span>我是span</span>
  </div>
  <script>
    let ipt = document.querySelector('input')
    let span = document.querySelector('span')
    let div=document.querySelector('div')
    // 
    /* ipt.onblur = function () {
      span.innerText = ipt.value
    } */
    // 
    /* ipt.onchange = function () {
      console.log('onchange')
    } */
    // 
    /* ipt.onfocus = function () {
      console.log('onfocus')
    } */
    // 
    /* ipt.oninput = function (e) {
      console.log('oninput')
      console.log(e.target.value);
    } */
​
    div.onclick=function(e){
      // 触发谁拿到的就是谁
      console.log(e.target)
      // this指向事件源
      console.log(this)
    }
  </script>
</body>
​
</html>

    onkeydown:键盘按下

    onkeypress:键盘按下

    onkeyup:键盘弹起

    html 复制代码 
    <body>
  <input type="text">
  <script>
    let ipt=document.querySelector('input')
    /* window.onkeydown=function(e){
      // enter的键码是13
      console.log(e.keyCode)
      if(e.keyCode==13){
        ipt.focus()
      }
    } */
    window.onkeyup=function(e){
      console.log(e.keyCode)
    }
  </script>
</body>

    onmousedown:鼠标按下

    onmouseenter:鼠标进入

    onmouseleave:鼠标离开

    onmousemove:鼠标移动

    onmouseout:鼠标即将离开

    onmouseup:鼠标弹起

    onscroll:滚动

    onsubmit:提交

var和let的区别：

  • 作用域不同

    var是函数作用域（伪全局作用域）

    let是块级作用域：在块级作用域内声明的变量无法在块级作用域外面使用

  • let不能在定义之前访问该变量，但是var可以在定义之前访问（let不会预解析）

    javascript 复制代码 
    console.log(a)//预解析只声明不复制 undefined
var a = 10//var 后面的变量，变量提升了（也就是预解析了）
console.log(a)//10
console.log(b)//报错（Uncaught ReferenceError: Cannot access 'b' before initialization），let声明的变量不能在定义（初始化）之前访问
let b = 20

  • let不能被重新定义，但是var是可以的

javascript 复制代码 
let a = 10
let a = "你好"//报错（Uncaught SyntaxError: Identifier 'a' has already been declared）let后面的变量不能重新定义，var可以
console.log(a)
var b = 10
var b = "你好"
console.log(b)
相关推荐
EasyNTS22 分钟前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作