Web API

作用、分类

作用：通过js去操作html和浏览器

DOM（文档对象模型）和BOM（浏览器对象模型）

1648989181307

DOM

**DOM：**文档对象模型，操作网页内容的功能作用：开发网页内容特效和实现用户交互的API

DOM树：直观体现了标签和标签之间的关系，html文档以树状结构表现出来

1648989264642

DOM对象

浏览器根据html标签生成的js对象：所有的标签属性都能在这个对象上找到，修改这个对象属性会自动映射到标签身上。

1648989365138

DOM核心： 把网页内容当作对象来处理，

DOM对象 :由DOM里提供的一个对象，提供的属性和方法都是用来访问和操作网页内容的。

获取DOM对象：

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

1.想要获取页面的标签可以通过 **document.querySelector("")**选择器；

2.querySelector()只能获取第一个满足条件的标签

3.如果选择器找不到元素（标签名写错或者没有这个标签）querySelector()返回值为null 找的到返回dom元素

4.输出和打印dom元素用console.dir()

    <i>今天天气好</i><br>
    <u>谁出去玩</u>
    <script>
        let userName=prompt("请输入用户名称");
        let uDom=document.querySelector("u");/* 选中u标签 */
        uDom.innerText=userName;/* 把u标签内部文本修改为用户输入的名称 */
    </script>

document.querySelectorAll("ul li")不管选择器有没有写对返回值都是一个伪数组，如果要得到数组中所有对象通过遍历（for）的方法能找到返回dom元素找不到是空数组Nodelist[]；

 <script>
        let list=document.querySelectorAll("li");
        // console.dir(list);/* 五个dom元素li */
        for (let index = 0; index < list.length; index++) {
            list[index].innerText=`输出li`+index;/* 遍历li标签并且改变li里面内容改变 */
        }     
    </script>

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

let divDom=document.getElementsByClassName("title") /* 根据类名选择标签 */
       let          ps=document.getElementsByTagName("p");/* 根据标签名字选页面中所有p的标签 */
let divs=document.getElementById("s")/* 根据id名选择标签 */

设置文本内容的方法：

document.write();只能追加到前面位置，文本中包含的标签会被解析
对象.innerText=修改内容；只能解析文字不能解析标签
对象.innerHTML=' 修改内容；可以解析文字也可以解析html标签

  document.write();/* 很少使用 */
        document.querySelector('li:nth-child(2)').innerText="<button>修改内容</button>"/* 只能解析文字不能解析标签 */
        document.querySelector('li:nth-child(3)').innerHTML=' <button>修改内容</button>'/* 可以解析文字也可以解析html标签 */

设置或修改标签属性

通过js设置或修改标签元素属性，通过src更换图片等标签中有等号的就是属性名和属性值

修改元素样式属性：

style属性操作css：

1648990938427

1.属性如果有-连接符，需要转换小驼峰命名

2.修改样式通过style属性引出

3.赋值时候加单位

body修改rgba中的随机颜色

 <script>
       /* 1.因为rgba颜色所有要定义函数可以调用很多次 */
       /* 2.定义完函数开始调用rgb取值（0，255） a（0，1）*/
       /* 3.给body增加样式 */
       function getRandomColor(min,max) {
           return Math.round(Math.random()*(max-min)+min)
       }
       let color1=getRandomColor(0,255);
       let color2=getRandomColor(0,255);
       let color3=getRandomColor(0,255);
       let color4=getRandomColor(0,1);
       document.body.style.backgroundColor=`rgba(${color1},${color2},${color3},${color4})`
   </script>

className动态修改样式

1.可以同时设置多个class 以空格分开

2.并且有覆盖性新值可以替换旧值

1648991082070

 let divdom=document.querySelector('div');
        divdom.className="change r"/* 可以同时设置多个class 以空格分开 并且有覆盖性 新值可以替换旧值 */

classList动态修改样式：

 let divdom=document.querySelector('div');
        divdom.classList.add("change","r");/* 利用classlist给元素增加类可以增加多个类中间，隔开 */
        divdom.classList.remove("change");/* 单独来指定删除一个class */
        divdom.classList.toggle("s");/* 切换一个类 如果有就移除 如果没有就增加 */

定时器-间歇函数

开启定时器：能够使用定时器函数重复执行代码

定时器返回值是一个id数字

定时器有两个参数 函数和时间 时间是以毫秒为单位的

设置定时器方法一：

  function set() {
           console.log("这是个定时器");
       }
       setInterval (set,1000);/* 第一种写法 */

设置定时器方法二：

 setInterval(function() {
           console.log("定时器");
       },1000)/* 第二种写法 */

关闭定时器

1648991324316

一般不会刚创建就停止，需要满足一定条件后再停止

WebAPI第一天