web APIs 基本认知web APIs 基本认知作用和分类作用：就是使用JS去操作html和浏览器分类：DOM

web APIs 基本认知

作用和分类

作用：就是使用JS去操作html和浏览器
分类：DOM(文档对象模型)，BOM(浏览器对象模型)

DOM基本知识

什么是DOM
- DOM是用来呈现以及任意HTML或XML文档交互的API
- 大白话：DOM是浏览器提供一套专门操作网页内容的功能
- DOM作用：开发网页内容特效和实现用户交互
DOM树
- 将HTMl文档以树状结构直观表现出来，我们称之为DOM树
- 描述网页内容关系的名词
- 作用：文档数直观的体现了标签与标签之间的关系
DOM对象
- DOM对象：浏览器根据html标签生成的js对象
  - 所有的标签属性都可以在这个对象上找到
  - 修改这个对象上的属性会自动映射到标签身上
- DOM的核心思想
  - 把网页内容当做对象来处理
- document对象
  - 是DOM里提供一个对象
  - 所以他提供的属性和方法都是用来访问和操作网页内容的
  - 网页所有内容都在document里面

获取DOM元素

根据css选择器来获取DOM元素

匹配第一个第一个元素

document.querySelector('css选择器')

参数：

包含一个或者多个有效的css选择器字符串

<div class="box">
	<input name='xx'>    
</div>
//选中了div里面的name属性为xx的input标签
let inputDom = document.querySelector("div.box input[name='xx']");

返回值：

css选择器匹配的第一个元素，一个HTMLElement对象

<div>1</div>
<div>2</div>
<script>
	let divDom = document.querySelector('div')
    console.dir(divDom)
</script>

如果没有匹配到，则返回null

<script>
	let divDom = document.querySelector('div')
    console.dir(divDom)//null
</script>

用console.log打印出来的是标签，要想输出一个dom对象就用console.dir()

<div></div>
<script>
	let divDom = document.querySelector('div')
	console.log(divDom)
    console.dir(divDom)
</script>

选择匹配的多个元素

document.querySelectorAll('css选择器') ```

  参数：

  - 包含一个或多个有效的css选择器字符串

  返回值：
  
  - css选择器匹配的所有符合的对象集合
  
    ```html
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    let liDom = document.querySelectorAll('ul li')
    console.dir(liDom)
    ```
  
  - 1
  
  - 
  
  特点：
  
  - 得到的是一个伪数组
  
  - 没有数组的pop(),push()等数组的方法
  
  - 想要得到里面的每一个对象，则需要遍历的方式来获得
  
    ```js
    let divs = document.querySelectorAll('divs')
    console.dir(divs)
    ```
  
    
  
  注意：哪怕只有一个元素，通过querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素而已

其他获取DOM元素方法（了解）
1. 根据id获取一个元素
```
document.getElementById('id名')
```
2. 根据标签取一类元素获取页面所有的div
```
documentgetElementsByTagName('div')
```
3. 根据类名获取元素获取页面所有同类名的元素
```
document.getElementsByClassName('w')
```

设置/修改DOM元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。就是操作对象使用的点语法

document.write()方法

只能将文本内容追加到前面的位置
文本包含标签会被解析

//永远只是追加操作，且只能位置</body>前
document.write('Hello World')
document.write('<h3>你好，js</h3>')

对象.innerText 属性

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

将文本包含的标签不会被解析

<div class="box"></div>
let box = document.querySelector('.box')
box.innerText = '<h4>你好，世界</h4>'

对象.innerHTML 属性

将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析

<div class="box"></div>
let box = document.querySelector('.box')
box.innerHTML = '<h6>我的世界<br>有你真好</h6>'

设置/修改DOM元素属性

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

可以通过JS设置/修改元素样式属性

设置/修改元素常用属性

语法:

对象.属性 = 值

代码示例：

<img src='' title='未定义图片'/>
//获取到img标签
let pic = document.querySelector('img')
//操作元素设置或者修改属性
pic.src = '图片路径'
pic.src = '这是一个图片'

设置修改元素样式属性

通过style属性操作css

语法:

对象.style.样式属性 = 值

注意:

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

代码示例：

<div class="box"></div>
let box = document.querySelector('.box')
//修改盒子的样式属性
box.style.backgroundColor = 'skyblue'
box.style.width = '300px'
box.style.height = '300px'
box.style.marginTop = '50px'

操作类名(className)操作css

如果修饰的样式比较多，直接通过style属性修改比较繁琐，我们可以借助类名的形式

语法：

元素.className = 'box'

注意：

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

代码示例:

.box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            color: pink;
        }

.box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
<div class="box">你好</div>
    <script>
        let div = document.querySelector("div")
        //会替换掉已有的类名
        div.className = 'box1'
        //想要保存类名必须加上以前那个类
        // div.className = 'box box1'
</script>

通过classList操作控制css

为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名

语法：

追加一个类

//可以一次添加多个类
元素.classList.add('类名')

删除一个类

//可以同时删除多个类
元素.classList.remove('类名')

切换一个类

//如果本来有，那我就移除  ， 如果本来没有，那我就添加
元素.classList.toggle('类名')

设置/修改表单元素属性

获取：
```
DOM对象.属性名
```

设置：

DOM对象.属性名 = 新值

语法：

表单.value='用户名'
表单.type = 'password'
....

定时器-间歇函数

定时器介绍：

网页中经常会需要一种功能：每隔一段时间需要自动执行一行代码，不需要我们手动触发。就比如网页中的倒计时，要实现这种需求，需要定时器函数。其中一种就是间歇函数

定时器的使用：

1.开启定时器：

setInterval(函数,间隔函数)

注意：

作用：每隔一段时间调用这个函数
间隔的时间单位是毫秒

写法：

//写法一

function repaet(){
    console.log('哈哈')
}
//每隔一秒调用repeat函数
//注意函数名不要加括号，定时器的返回值是一个id数字
setInterval(repeat,1000)

//写法二
setInterval(function(){
            console.log('哈哈')
},1000)

//写法三
setInterval(() => {
            console.log("头发")
}, 1000);

2.关闭定时器

let hh = setInterval(() => {
            console.log("头发")
}, 1000);
clearInterval(hh)

web APIs 基本认知

web APIs 基本认知

作用和分类

DOM基本知识

获取DOM元素

根据css选择器来获取DOM元素

其他获取DOM元素方法（了解）

设置/修改DOM元素内容

设置/修改DOM元素属性

定时器-间歇函数