获取DOM元素
根据CSS选择器来获取DOM元素 (重点)
注意：括号内必须是字符串
1.选择匹配的第一个元素
语法：
document.querySelector('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。
2.选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数：
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的NodeList 对象集合
得到的是一个伪数组:
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历(for)的方式获得。
注意：
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
其他获取DOM元素方法(了解)
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面的所有div
document.getElementsByTagName('div')
//根据 类名获取元素 获取页面所有类名为pic的
document.getElementsByClassName('pic')
标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
设置 / 修改DOM元素内容
1.document.write()
- 只能将文本内容追加到前面的位置
- 文本中包含的标签会被解析
2. 元素.innerText属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
3.元素.innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
设置 / 修改DOM元素属性
设置 / 修改元素常用属性
例如：元素.src = 元素.title =
let pic = document.querySelector("img")
pic.src = "./images/01.jpg"
pic.title = "123"
设置 / 修改元素样式属性
1.通过 style 属性操作CSS
语法：
对象.style.样式属性 = 值
注意:
- 修改样式通过style属性引出
- 如果属性有-连接符，需要转换为小驼峰命名法
- 赋值的时候，需要的时候不要忘记加css单位
box.style.backgroundColor = '#fff'
box.style.color = 'blue'
box.style.marginBottom = '10px'
2.操作类名(className) 操作CSS
语法：
元素.className = 'box'
注意:
- 由于
class是关键字, 所以使用className去代替 className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.通过 classList 操作类控制CSS
classList.add( newClassName );
//添加新的类名，如已经存在，取消添加
classList.contains( oldClassName );
//确定元素中是否包含指定的类名，返回值为true 、false;
classList.remove( oldClassName );
//移除已经存在的类名;
classList.toggle( className );
//如果classList中存在给定的值，删除它，否则，添加它；
classList.replace( oldClassName, newClassName );
//类名替换
设置/修改 表单元素 属性
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
表单.value = '用户名' 表单.type = 'password'表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true代表添加了该属性 如果是false代表移除了该属性比如: disabled、checked、selected
// 1. 获取元素
let input = document.querySelector('input')
// 2. 取值或者设置值 得到input里面的值可以用 value
input.value = '手机'
input.type = 'password'
// 2. 启用按钮
let btn = document.querySelector('button')
// disabled 不可用 = false 这样可以让按钮启用
btn.disabled = false
// 3. 勾选复选框
let checkbox = document.querySelector('.agree')
checkbox.checked = false
发表回复