Web API 基本认知

作用和分类

作用：就是使用JS去操作HTML和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

DOM（Document Object Model———— 文档对象模型）是用来呈现以及任意HTML或XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
开发网页内容特效和实现用户交互

DOM树

DOM对象（重要）

DOM对象：浏览器根据html标签生成的JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

document对象

是DOM里提供的一个对象
所以它提供的属性和方法都是来访问和操作网页内容的
网页所有内容都在document里面

获取DOM元素

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

查询特定或所有DOM节点：

使用querySelector方法查找特定标签的节点。

1
const headingNode = dom.querySelector('h1');

使用querySelectorAll方法获取所有DOM节点，适用于需要遍历和处理多个节点的情况。

1
const allElements = dom.querySelectorAll();

参数：
包含一个或多个有效的CSS选择器字符串

返回值：
CSS选择器匹配的第一个元素，一个HTMLElement对象。

操作元素内容

能够修改元素的文本更换内容

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

.innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

1
2
3
4
5
6
7
8
9
10
11
12
    <title>Document</title>
</head>
<body>
    <div class="box">我是文字内容</div>
</body>
<script>
    //1.获取元素
    const box =document.querySelector('.box')
    //2.修改文字内容 对象。innerText 属性
    console.log(box.innerText) //获取文字内容
    box.innerText='我是一个盒子'//修改文字内容
</script>

.innerHTML属性

innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 和 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</head>
<body>
    <div class="box">我是文字内容</div>
</body>
<script>
    //1.获取元素
    const box =document.querySelector('.box')
    // //2.修改文字内容 对象。innerText 属性
    // console.log(box.innerText) //获取文字内容
    // box.innerText='我是一个盒子'//修改文字内容
    
    //3.innerHTML 解析标签
    console.log(box.innerHTML)
    box.innerHTML='<b>我要更换</b>' 
</script>

操作元素常用属性

还可以通过JS设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如：href、title、src等

语法：

1
2
3
4
5
//1.获取元素
const pic=document.querSelector('img')
//2.操作元素
pic.src=''
pic.tltle=''

页面随机获取图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <img src="./"alt="">
    <script>
        //取到N~M的随机整数
        function getRandom(N,M){
            return Math.floor(Math.random()*(M-N+1))+N
        }
        //1.获取图片对象
        const img =document.querySelector('img')
        //2.随机得到序号
        const random =getRandom(1,6)
        //3.更换路径
        img.src=`./${random}`
    </script>
</body>

操作元素样式属性

还可以通过JS设置/修改标签元素的样式属性
比如通过滚轮图小圆点自动更换颜色样式

通过style属性操作CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //1.获取元素
        const box=document.querySelector('.box')
        //2.修改样式属性 对象.style.样式属性='值+单位' 
        box.style.width='300px'
        box.style.height='300px'
        //多组单词的采取 小驼峰命名法
        box.style.backgroundColor='hotpink'
        box.style.border='2px solid blue'
    </script>
</body>

操作类名（className）操作CSS

操作类名（className）操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //1.获取元素
        const div =document.querySelector('div')
        //2.添加类名  class 是关键字 
        div.className='box'
    </script>
</body>

通过classLidt操作类控制CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <style>
        .box{
            width: 200px;
            height: 200px;
            color: aqua;
        }
        .active{
            color: aquamarine;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //通过classList添加
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式
        //追加类add()  类名不加点，并且是字符串
        box.classList.add('active')
        //删除类 remove() 类名不加点，并且是字符串
        box.classList.remove('box')
        //切换类 toggle() 有就删掉，没有就加上
        box.classList.toggle('active')
    </script>
</body>

操作表单元素 属性

表单很多情况吗，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <input type="text" value="电脑">
    <script>
    //1.获取元素
    const uname=document.querySelector('input')
    //2.获取值 获取表单里面的值 用的 uname.value
    console.log(uname.value)
    //3.设置表单的值
    uname.value= ''
    uname.type='password'     
    </script>
</body>

复选框
比如：disabled、checked、selected

1
2
3
4
5
6
7
8
9
<input type="checked" name="" id="">

const ipt = document.querySelector('input')

ipt.checked=true

const button = document.querySelector('button')

button.disabled=true

自定义属性

自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以dataset对象方式获取

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div data-id="1" data-spm="youxianyu">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
        const one = document.querySelector('div')
        console.log(one.dataset.id)
        console.log(one.dataser.spm)
    </script>
</body>

间歇函数

定时器函数可以开启和关闭定时器

1.开启定时器

1
setInterval(函数，间隔时间)
1
2
3
4
5
6
7
8
9
function repeat(){
    consoloe.log('youxianyu')
}

setInterval(repeat,1000)
========================
setInterval(function(){
    console.log('youxianyu')
},1000)

2.关闭定时器

1
2
let timer=setInterval(函数，间隔时间)
clearInterval(变量名)
1
2
3
4
let timer = setInterval(function(){
    console.log('youxianyu')
},1000)
clearInterval(timer)