Web APIs（DOM-获取元素）

一、Web API 基本认识

 

        1. 作用分类

                作用：使用JS取操作 html 和浏览器。

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

        2. DOM（文档对象模式）

                是浏览器提供的一套专门用来 操作网页内容 的功能。

                作用：开发网页内容特效和实现用户交互。

        3. DOM树

                将 HTML 文档以树状结构直观的变现出来，我们称为文档树 火 DOM 树；描述网页内容关系的名词。

                作用：文档树直观的体现了标签与标签之间的关系。

        4. DOM 对象 

                浏览器根据html标签自动生成的JS对象

                        所有的标签属性都可以在这个对象上面找到。

                        修改这个对象的属性回自动映射到标签身上。 

                核心思想：把网页内容当作对象来处理 。

                document 对象：

                        是 DOM 里面提供的一个对象。

                        它提供的属性和方法 都是 用来访问和操作网页内容的；网页所有内容都在document里面。例如：document.write（）

 

二、获取 DOM 对象

        1. 根据CSS选择器来获取DOM元素 （重点）

                1.1 选择匹配的第一个元素

                        语法：

        document.querySelector('CSS选择器')

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

                        返回值：

                                 CSS选择器匹配的第一个元素，一个HTMElement对象。

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

                1.2 选择匹配多个元素 

                        语法：

        document.querySelectorAll('css选择器')

                        返回值：

                                 CSS选择器匹配的 NodeList 对象集合。

        document.querySelectorAll('ul li')

                                得到一个伪数组 ：

                                        有长度有索引的数组；

                                        但是没有pop（）  push（）等数组方法；

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

 

 三、设置、修改DOM元素内容

         1. document.write()  方法

                 只能将文本追加到</body>前面的位置，永远都只是追加操作，且只能位置</body>前。

                文本中包含的标签会被解析。

        2.元素innerText 属性

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

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

        3.元素.innerHTML 属性

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

                文本中包含的标签会被解析。

                

四、设置、修改DOM元素属性

        1.设置/修改元素常用属性

    pic.src = `./images/${num}.webp`

        2. 设置/修改元素样式属性

                 如：轮播图小圆点自动更换颜色样式、点击按钮可以滚动图片，这是移动的图片的位置left。

                2.1  通过style 属性操作css

                         

                ​​​​​​​        

 

                2.2  操作类名（className）操作css

                         

                2.3  通过classLIst 操作类控制CSS

 

        3.设置/修改 表单元素 属性

         

 

五、 定时器-间歇函数

         1.定时器函数介绍

                 1.1 开启定时器

        ​​​​​​​        ​​​​​​​                

        ​​​​​​​        

                1.2 关闭定时器