Web APIs 第一天

基本认知

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

DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能 DOM作用:开发网页内容特效和实现用户交互

DOM树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树描述网页内容关系的名词作用：文档树直观的体现了标签与标签之间的关系

DOM对象（重要）

DOM对象：浏览器根据html标签生成的 JS对象所有的标签属性都可以在这个对象上面找到修改这个对象的属性会自动映射到标签身上

DOM的核心思想：把网页内容当做对象来处理

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

获取DOM对象

获取单个元素

查找元素DOM元素就是选择页面中标签元素

语法

    <script>
        document.querySelector('css选择器')
    </script>

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

返回值： CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

    <script>
        document.querySelector('div')
        console.dir(document.querySelector('div'))
    </script>

查看控制台，使用console.dir

获取多个元素

语法

    <script>
        document.querySelectorAll('css选择器')
    </script>

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

返回值

有长度有索引号的数组,伪数组想要得到里面的每一个对象，则需要遍历（如 for）的方式获得如果没有匹配到，则返回[] 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

    <script>
        document.querySelectorAll('li')
        console.dir(document.querySelectorAll('li'))
    </script>

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

    <script>
        //根据id获取一个元素
        document.getElementById('nav')
        //根据 标签获取一类元素，输出伪数组
        document.getElementsByTagName('div')
        //根据 类名获取一类元素，所有类名为“w”输出伪数组
        document.getElementsByClassName('w')
    </script>

设置/修改DOM元素内容

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

如果想要修改标签元素的里面的内容，则可以使用如下几种方式： document.write() 方法对象.innerText 属性对象.innerHTML 属性

document.write()

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

    <script>
        //永远都只是追加操作，且只能位置</body>前
        document.write(`hello`)
        document.write(`<h1>大家好</h1>`)
    </script>

对象.innerText

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

<body>
    <div></div>
    <script>
        let divDom = document.querySelector('div')
        divDom.innerText = '你好'
    </script>
</body>

对象.innerHTML

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

<body>
    <div></div>
    <script>
        let div = document.querySelector('div')
        div.innerHTML = '你好<button>厉害</button>'
    </script>
</body>

案例1

随机抽取的名字显示到指定的标签内部需求：将名字放入span 盒子内部

<body>
    <span></span>
    <script>
        let userName = ['鸭','鸡','猪','马','牛']
        let num = Math.round(Math.random()*(userName.length - 1))
        let spanDom = document.querySelector('span')
        spanDom.innerHTML = `${userName[num]}`
    </script>
</body>

设置/修改DOM元素属性

设置/修改元素常用属性

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

    <script>
        对象.属性 = 值
    </script>

举例

<body>
    <img src="" alt="">
    <script>
       let images = document.querySelector('img')
       images.src = './imgae/微信图片_20220403155151.png'
       images.alt = '可以可以'
    </script>
</body>

案例2

需求：当我们刷新页面，页面中的图片随机显示不同的图片

<body>
    <img src="" alt="">
    <script>
        let images = ['./imgae/微信图片_20220403155151.png','./imgae/微信图片_20220403155319.png','./imgae/微信图片_20220403155325.png','./imgae/微信图片_20220403155330.png']
       let image = document.querySelector('img')
        let num = Math.round(Math.random() * (images.length - 1))
        image.src = `${images[num]}`
    </script>
</body>

设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。比如通过轮播图小圆点自动更换颜色样式点击按钮可以滚动图片，这是移动的图片的位置 left 等等

通过 style 属性操作CSS 操作类名(className) 操作CSS 通过 classList 操作类控制CSS

1.通过 style 属性操作CSS

语法

    <script>
        对象.style.样式属性 = 值
    </script>

举例

<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector('.box')
        box.style.backgroundColor = 'red'
        box.style.height = '300px'
        box.style.marginTop = '100px'
    </script>
</body>

案例3

需求：当我们刷新页面，页面中的背景图片随机显示不同的图片

    <script>
        let imgs = ['./imgae/微信图片_20220403155330.png','./imgae/微信图片_20220403155325.png','./imgae/微信图片_20220403155319.png','./imgae/微信图片_20220403155151.png']
        let num = Math.round(Math.random() * (imgs.length - 1))
        let bodyBom = document.querySelector('body')
        bodyBom.style.backgroundImage = `url(${imgs[num]})`
    </script>

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

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

    <script>
        元素.className = 'active'
    </script>

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

3.通过 classList 操作类控制CSS

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

<body>
    <div class="b1"></div>
    <script>
        //添加方法
        let divDom = document.querySelector ('div')
        divDom.classList.add("b4","b3","b2","b1");//增加类
        divDom.classList.remove("b2","b4")//删除类
        divDom.classList.toggle ("b6")//本来就有，就移除，本来没有，就增加
    </script>
</body>

定时器函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

1.开启定时器

    <script>
        setInterval(函数，时间)
    </script>

举例

    <script>
        setInterval(function repeat(){
            console.log('你真好')
        },1000)
    </script>

匿名函数

    <script>
        setInterval(function () {
            console.log('你真好')
        },1000)
    </script>

2.关闭定时器

    <script>
        //一般不会刚创建就停止，而是满足一定条件再停止
        let num = setInterval(function(){
            console.log('你好')
        },1000)
        clearInterval(num)
    </script>

举例

    <script>
        let index = 0
        let timeId = setInterval(function(){
            index++
            console.log("想笑啊")
            if(index === 20){
                clearInterval(timeId)
            }
        },1000)
    </script>