设置/修改DOM元素内容

元素innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，文本中包含的标签不会被解析

  
123
  
abc
  

元素.innerHTML 属性

将文本内容添加/更新到任意标签位置

能识别文本，文本中包含的标签会被解析，多标签建议使用模板字符

  
123
  
abc
  

设置/修改DOM元素属性

操作元素常用属性

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

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

语法：

对象.属性 = '值'

  
123
  
  

操作元素样式属性

通过 style 属性操作CSS

语法：

对象.style.样式属性 = '值'

注意：

1. 修改样式通过style属性引出,值为字符串
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值的时候，需要的时候不要忘记加css单位

    文本节点
    
p标签
  
  

操作类名(className) 操作CSS

语法：对象.className = '类名'

注意：

1. 由于class是关键字, 所以使用className去代替
2. className是使用新值换旧值, 直接使用 className 赋值会覆盖以前的类名,如果需要添加一个类,需要保留之前的类名

  

    文本节点
    
p标签
  
  

通过 classList 操作类控制CSS

语法：

• 添加类名:

  对象.classList.add('类名')

• 删除类名:

  对象.classList.remove('类名')

• 切换类名：有就删除，没有就添加

  对象.classList.toggle('类名')

• 查看类名:是否包含类名 返回boolean

  对象.classList.contains('类名')

操作表单元素属性

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

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

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取