DOM中获取元素的几种方式的详细解读、className和classLiss的差异

DOM中获取元素的几种方式的详细解读

document.querySelector

• 获取的是满足条件的第一个 一定只有一个
• 获取的是dom元素，可以直接操作
• 如果没有获取到，就返回null
  • Cannot read properties of null (reading 'style'):不能使用null读取属性style
• 错误写法

document.querySelectorAll

• 获取的是满足条件的所有DOM对象 返回的是一个集合-NodeList--伪数组
• 获取的是伪数组，无法直接操作,必须通过下标才能操作，所以我们对伪数组进行遍历
  • 可以用for
  • 也可以用forEach
• 就算没有获取到元素也返回一个伪数组--对象
• 写法document.querySelectorAll('#id')/('.类名')/('标签')

其他写法

• document.getElementById(标签名)

1. 利用ID来选取页面上有对应ID的标签名，不要带#，和引号

• document.getElementsByTagName(标签名)

1. 利用标签名来选取页面上对应的标签名，不要带符号，和引号

• document.getElementsByClassName(类名)

1. 利用类名来选取页面上有对应的类名的元素，不要带符号，和引号

设置/修改元素内容

• DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.

  •   就是操作对象使用的点语法
    

• 为标签设置标签之间的内容

  •   针对于双标签而言
    

• innerText

  •   只关注内容, 不关注标签
    

• innerHTML

  •   可以解析标签
    

• 如果要解析标签内容，就使用innerHTML
  • 动态渲染
  • 富文本框
• 使用: 不明确数据的安全性的情况下, 使用innerText

设置/修改元素属性

• 设置/修改常用（内置）属性
  • href、title、src

综合案例

• 图片更换案例

• 案例： 随机点名案例-名字渲染到页面已经有的标签里面

• 设置/修改元素样式属性
  • style操作css
  • 每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
  • 如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中-会被解析成减号）
  • style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
• 案例： 随机背景案例

操作类名(className)

• 由于class是关键字, 所以使用className去代替
• className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

classList

• 添加：add(class1, class2, ...)
• 删除：remove(class1, class2, ...)
• 切换：toggle(class)
• 是否包含：contains(class),包含返回true,不包含返回false

对比className和style、classList的区别

• 修改大量样式的更方便
• 修改不多样式的时候方便
• classList 是追加和删除不影响以前类名
  • 设置/修改表单属性
• 正常的有属性有取值的 跟其他的标签属性没有任何区别
  • 获取: DOM对象.属性名
  • 设置: DOM对象.属性名 = 新值
• 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
• 常见表单属性
  • value、disabled、checked、selected

密码框点击切换文本框、复选框全选案例