获取DOM对象的方式
document.querySelector('选择器')
document.querySelector('选择器')
特点：只返回满足条件的第一个dom元素，如果找不到则返回null
注意：它返回的元素可以直接进行进行dom操作
let myspan2 = document.querySelector('span:nth-of-type(2)')
myspan2.style.color = 'red'
document.querySelectorAll('选择器')
document.querySelectorAll('选择器')
特点：1.它能获取满足条件的所有元素
2.它不能直接进行操作操作，我们需要遍历这个伪数组，获取里面的每一个元素(伪数组里面的每一个元素都是dom元素)
注意：就算没有获取到元素也返回一个伪数组（空的）--对象
let spans = document.querySelectorAll('span')
for (let i = 0; i < spans.length; i++) {
// spans[i]:dom元素
spans[i].style.color = 'red'
}
其他获取方式
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
设置/修改DOM元素内容
- document.write() 只能将文本内容追加到 前面的位置 文本中包含的标签会被解析
- 元素.innerText 属性 细节1：它不会解析内容中的标签结构，它会将标签当成普通字符串处理--原样输出 细节2：innerText可以设置和修改，也可以取值--没有赋值就是取值 细节3：取值时，如果内容中有标签会忽略标签，保留文本内容
- 元素.innerHTML 属性 细节1：可以设置和修改内容，同时会解析内容中的标签 细节2：没有赋值就是取值,它是获取标签内的完整结构
随机点名案例----------------------
<script>
let names = ['⭐', '🐥', '🦆', '🐅', '🐘', '🐏']
// 获取按钮
let btn = document.querySelector('button')
let span = document.querySelector('span')
btn.addEventListener('click', function () {
// 1.生成一个随机数
let index = parseInt(Math.random() * names.length)
// 2.获取随机数所对应的姓名
let name = names[index]
// 3.将姓名渲染到span内部
// 如果没有标签，可以任意使用--innerText
// 如果有标签，就使用innerHTML
// span.innerText = name
span.innerHtml = name
})
</script>
设置/修改DOM元素属性
一. 设置/修改元素内置属性 最常见的内置属性如： href、title、src 等
语法：元素.属性 = 值
例：img.src = './images/1.jpg'
input.value = '请输入内容'
二. 设置/修改元素样式属性
1. 通过 style 属性操作CSS
style:它是一个对象，里面包含着当前的所有可用样式属性
注意：如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，有单位的不要忘记加css单位
例：p.style.fontSize = '40px'
p.style.backgroundColor = 'pink'
span.style.textDecoration = 'line-through'
2. 操作类名(className) 操作CSS
p.className = 'mystyle youstyle'
注意： 可以同时指定多个样式类名，以空格分隔，空格的数量>=1
className的缺点：会覆盖元素之前的样式
在使用插件或者框架的时候，我们往往并不是很方便的知道当前元素已经加了什么样式，意味着我们在使用 calssName的时候，风险很大。
3. 操作类名(classList) 操作CSS
p.classList.add('size50', 'underline')
// 添加多个样式，以','分割 ；在原有基础上添加新的样式
p.classList.remove('size50', 'underline')
// 删除多个样式，以','分割
p.classList.toggle('size50')
// 如果有就移除，如果没有就添加 ，只能切换一个
console.log(p.classList.contains('size50'))
// contains:判断元素是否拥有某个名称的样式，如果有返回true,如果没有返回false
注意：classList:不会修改元素之前的所拥有的样式
console.log(p.classList)
// 当前元素的样式列表--当前元素所拥有的样式，以数组的方式返回
三. 设置/修改表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
操作：取值:对象.属性； 赋值：对象.属性=''
input.value='用户名'
input.type='password'
checked就是可以用来设置或获取当前复选框的选中状态
// 当前复选框的选中状态:被选中为true 未选中为false
let chkState = chk.checked
\
