操作元素内容
en.innerText
- '渲染'文本内容到标签里面
- 显示纯文本，不解析html标签
- 语法：
en.innerText = "文本内容"
en.innerHTML
- '渲染'文本到标签里
- 解析html标签
- 语法：
en.innerText = "<p>文本内容</p>"
操作元素属性
- 可以通过DOM操作元素属性，比如通过 src 更换 图片地址等
- 语法 ：
对象.属性 = 值
操作元素样式属性
1.通过 style 属性操作元素样式：
- 语法：
对象.style.样式属性 = 值 - 注意：
- 1.修改样式通过style属性引出
- 2.如果属性有-
连接符，需要转换为小驼峰命名法 - 3.赋值时有单位需要加上
2.通过类名 className 操作元素样式：
- 语法：
对象.className = 类名 - 修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式修改。
- 核心：把多个样式放到css一个类中，然后把这个类添加到这个元素身上
- 注意：
- 1.由于class是关键字, 所以使用className去代替。
- 2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名，需要将之前的类名一起写上空格隔开。
- 3.只覆盖类选择器的其他类名。
- 返回值：
- 返回该元素的类名，字符串形式返回给我们。
3.通过classList 操作元素样式:
- 语法：
对象.classList.add('类名')= 新增一个类名对象.classList.remove('类名')= 移除一个类名对象.classList.toggle('类名')= 切换一个类名(如果有当前类名就替换，没有就追加)- 解决了className容易覆盖以前的类名，我们可以classList方式追加和删除类名。
- 返回值：
- 返回的是一个伪数组，值是类名。
4.操作表单元素属性
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。
- 正常的有属性有取值的 跟其他的标签属性没有任何区别
- 表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示。
- 如果为 true 代表添加了该属性
- 如果是 false 代表移除了该属性
- 例如：
inp.disabled = true= 禁用按钮inp.checked = true= 勾选复选框inp.selected = true= 在页面加载时预先选定该选项。被预选的选项会显示在下拉列表最前面的位置。
自定义属性
- 在html5中推出来了专门的
data-自定义属性 - 标准属性: 标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如：对象.title。
- 使用场景： 通过自定义属性可以存储数据，后期可以使用这个数据
设置自定义属性：
- 在标签上一律以
data-开头
- setAttribute设置自定义属性
dom.setAttribute('属性名', 值)- 注意： setAttribute方法也可以用来设置其他属性
获取自定义属性：
- 返回该属性的值。
dom.dataset.id
dom.dataset['id']
- 注意：如果有多个短横线连接的自定义属性获取方法：
- 用小驼峰获取。
4.getAttribute获取自定义属性：
dom.getAttribute('data-id')dom.getAttribute('自定义')
移除属性：
dom.removeAttribute('属性名')
