操作DOM元素属性操作DOM元素常用属性通过 JS 设置/修改标签元素属性，比如通过 src更换图片最常见的属性比

操作DOM元素常用属性

通过 JS 设置/修改标签元素属性，比如通过 src更换图片

最常见的属性比如： href、title、src 等

语法：对象.属性 = 值

<img src="./images/1.webp" alt="">

<script>
    // 获取图片
    const pic = document.querySelector('img')
    // 修改常见属性
    pic.src = "./images/2.webp"
    pic.title = "修改title"
</script>

操作DOM元素样式属性

可以通过 JS 设置/修改标签元素的样式属性。

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

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

操作DOM元素样式属性有以下三种：

通过 style 属性操作CSS

操作类名(className) 操作CSS

通过 classList 操作类控制CSS（常用）

通过 style 属性操作CSS

语法：对象.style.样式属性 = 值

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
}
</style>

<div class="box"></div>

<script>
    let box = document.querySelector('.box')
    box.style.width = "300px"
    box.style.backgroundColor = "skyblue"
    box.style.border = "2px solid red"
</script>

注意⚠️：

修改样式通过style属性引出

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

赋值的时候，需要的时候不要忘记加css单位

效果：

操作类名(className) 操作CSS

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

语法：元素.className = 'class类名'

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .nav {
      color: red;
    }

    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: skyblue;
      border: 1px solid #000;
    }
  </style>

  <div class="nav">123</div>

  <script>
    let div = document.querySelector('div')
    div.className = "box"
    // className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
    // div.className = "nav box"
  </script>

注意⚠️

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

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

效果：

通过 classList 操作类控制CSS（常用）

为了解决className 容易覆盖以前的类名，可以通过classList方式追加和删除类名

语法：
- 追加一个类：元素.classList.add('类名')
- 删除一个类：元素.classList.remove('类名')
- 切换一个类：元素.classList.toggle('类名')
  - 注意：toggle切换类是：有就删掉，没有就加上
- 查看是否包含某个类：元素.classList.contains('类名')

示例：

<style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .pink {
      color: red;
      background-color: pink;
    }

    .skyblue {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
</style>
<div class="box">文字</div>
<script>
    const box = document.querySelector('.box')
    // 2.1 追加类 add() 类名不加点，并且是字符串
    box.classList.add('pink')
    // 2.2 删除类  remove() 类名不加点，并且是字符串
    box.classList.remove('box')
    // 2.3 切换类  toggle()  有还是没有啊， 有就删掉，没有就加上
    box.classList.toggle('skyblue')
    // 2.4 是否包含某个类，有返回true，没有则返回false
    box.classList.contains('pink')  // true
    box.classList.contains('box')  // false
</script>

效果：

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

语法：
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值

const uname = document.querySelector('input')

// 获取值  获取表单里面的值 用的  表单.value
// uname.innertHTML 得不到表单的内容
console.log(uname.value) // 电脑

// 设置表单的值
uname.value = '我要买电脑'

console.log(uname.type)  // text
uname.type = 'password'

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性

比如： disabled、checked、selected

 // 1. 获取
const ipt = document.querySelector('input')
console.log(ipt.checked)  // false   只接受布尔值
ipt.checked = true
// ipt.checked = 'true'  // 会选中，不提倡  有隐式转换

// 1.获取
const button = document.querySelector('button')
console.log(button.disabled)  // 默认false 不禁用
button.disabled = true   // 禁用按钮

自定义属性

标准属性
- 标签天生自带的属性比如class id title等, 可以直接使用点语法操作
- 比如： disabled、checked、selected
自定义属性
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取

<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  // 1
    console.log(one.dataset.spm)  // 不知道
</script>