web APIs 第一天

一、获取DOM对象

1、获取单个元素

语法：

document.querySelector('css选择器')

2、获取多个元素

语法：

document.querySelectorAll('css选择器')

 注意：得到的是一个伪数组：

• 有长度有索引号的数组
• 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得。

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

3、他们两者小括号里面的参数有什么注意事项？

• 里面写css选择器
• 必须是字符串，也就是必须加引号
• 选择器在css里面怎么写，在这也怎么写

4、他们两者的区别是什么？

• querySelector() 只能选择一个元素， 可以直接操作
• querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素

二、 设置/修改DOM元素内容

1、方法一：

元素.innerText 属性

• 获取内容   语法：元素.innerText
•  修改内容 语法：元素.innerText=值

2、方法二：

元素.innerHTML属性

设置内容 语法：元素.innerHTML=值

获取内容 语法：元素.innerHTML

3、两者的区别

• 元素.innerText 属性 只识别内容，不能识别标签
• 元素.innerHTML 属性 识别内容和标签

三、设置/修改DOM元素属性 

1、设置标签属性

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

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

• 设置 语法：元素.属性=值
• 获取 语法：元素.属性

2、设置样式属性

一共有三种方法：

1. 通过 style 属性操作CSS

2. 操作类名(className) 操作CSS

3. 通过 classList 操作类控制CSS

---

下面分别介绍：

1. 通过 style 属性操作CSS

语法：

 举例说明：

 注意：

 2. 操作类名(className) 操作CSS

语法：

 注意：

• 由于class是关键字, 所以使用className去代替

• 直接使用 className 赋值会覆盖以前的类名（下面例子：原来的类名box被覆盖了）
• 

 3. 通过 classList 操作类控制CSS

classList不会覆盖原来的类名

①添加类名

语法：元素.classList.add('类名')

②删除类名

语法： 元素.classList.remove('类名')

③切换类名

 语法： 元素.classList.toggle('类名')

原则：原来有这个类名，就删除。原来没有这个类名就添加

④检测类名

语法： 元素.classList.contains('类名')

原则：原来存在这个类名，输出结果就为true；原来不存在这个类名，输出结果就为false

 四、设置/修改 表单元素 属性

• 设置  语法：元素.属性='新值'
• 获取  语法：元素.属性
• 

• disabled：

1.  元素.disabled=true 禁用
2.  元素.disabled=false 不禁用
3. console.log(元素.disabled) 输出结果为true 表示禁用；输出结果为false 表示没有禁用

• checked：

1.  元素.checked=true 设置元素选中
2.  元素.checked=false 设置元素不选中
3. console.log(元素.checked) 输出结果为true 表示选中；输出结果为false 表示没有选中

• selected：

1.  元素.selected=true 设置选中
2.  元素.selected=false 设置不选中
3. console.log(元素.selected) 输出结果为true 表示选中；输出结果为false 表示没有选中