一、Web API介绍

龍赢

于 2021-11-09 16:05:06 发布

阅读量1.5k

点赞数

文章标签：前端 xml javascript

本文链接：https://blog.youkuaiyun.com/weixin_52580155/article/details/121230372

版权

本文介绍了Web API的概念，DOM的详细内容包括获取元素的各种方法，以及JavaScript中的事件基础和元素操作，如改变元素内容、属性操作、事件监听等。此外，还探讨了JS的执行机制和BOM中的定时器、location对象等知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web API介绍

一级目录
三、JS执行机制

一级目录

二级目录

三级目录## 一、Web API介绍

1.1 API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是为了提供应用人员与开发人员基于某个软件或硬件得以访问一组历程的能力，无需访问源代码，无需与其他内部工作机制的细节，就能直接调用使用就行。

JS中的Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM);

主要针对浏览器来做交互之类的。

二、DOM介绍

DOM是什么？

DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。

三大类：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

		文档
		根元素：
元素：			元素：
元素：	属性：href	元素：	元素：
文本：“文档标题”		文本：“链接	文本”标签

DOM树又称为文档树，把文档映射成树形结构，通过节点对象的处理，来加入到页面当中去。

文档：一个页面中有一个文档，用document来表示。
节点：网页中的所有内容在文档树中都是节点，利用node来表示
标签节点：网页中的所有标签，通常称为元素节点，有称为元素。利用element表示。

2.3获取元素

获取元素是为了对页面上的东西进行更好的操作。

2.3.1 根据ID去获取

语法：document.getElementById(元素的ID值)

通过ID去获取元素对象

2.3.2根据标签名获取元素

语法：document.getElementsByTaName(标签的名字);

根据标签名去获取元素对象（可以获取一个标签组）

注意事项：

因为当道的一个集合，所以我们想要操作元素需要去遍历它
得到的元素是动态的

当元素增加时，集合也会跟这增加

2.3.3 H5新增的获取元素的方法

通过类名获取: getElementsByClassName(“类名”)

指定选择器（一个的情况下）： querySelector(‘选择器’)

指定选择器：querySelectorAll(‘选择器’)

选择器前面需要加上指定符号

2.3.4 获取特殊元素

获取body document.body

获取HTML document.documnetElement

三、事件基础

3.1事件三要素

事件源.事件类型=function{

事件处理程序

}

3.2常见的鼠标事件

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

四、操作元素

4.1改变元素内容（获取或设置）

element.innerText 空格和换行会去除不会识别html

element.innerHTML 会保留空格跟换行会识别html

4.2 常用元素的属性操作

获取属性的值

元素对象.属性名

设置对象的值

元素对象.属性名=值

4.3分时问候

var time = new Date().getHours();

 if (time >= 8 && time < 12) {

  alert("早上好");

 document.body.style.background = "url(img/01.png) no-repeat center center ";

 } else if (time >= 12 && time < 18) {

  alert("中午好");

  document.body.style.background = "url(img/02.png) no-repeat center center ";

 } else if (time >= 18 && time < 24) {
  
     alert("下午好");

  document.body.style.background = "url(img/03.png) no-repeat center center ";

}

4.4表单元素的属性操作

常用的属性有：type value checked selected disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名=值

表单元素中有一些属性：disabled、checked、selected，元素对象的这些属性的值是布尔型。

value在表单中添加内容

div.disabled=true;使按钮不能继续被点击

4.5全选和反选

全选<input type="checkbox" id="tbn1"><br>
    <input type="checkbox" class="tbn2">
    <input type="checkbox" class="tbn2">
    <input type="checkbox" class="tbn2">
    <input type="checkbox" class="tbn2">    <script>
 //点击大的全选 小的全部选中 取消全部取消
var tbn1 = document.getElementById("tbn1");
var tbns = document.querySelectorAll(".tbn2");
 tbn1.onchange = function() {
  var cun = this.checked; //获取大复选框的选中状态  true  false
      if (cun == true) {
             for (var i = 0; i < tbns.length; i++) {
                   tbns[i].checked = true;
               }
          } else {
               for (var i = 0; i < tbns.length; i++) {
                  tbns[i].checked = false;
             }
          }
            console.log(this.checked);
       };
</script>

4.6样式属性操作

常用的样式属性：

element.style 行内样式操作
element.className 类名样式操作

4.7点击和关闭案例

 <button class="btn">按钮1</button>
    <button class="btn">按钮2</button>
    <button class="btn">按钮3</button>
    <script>
        // 要求点击不同的按钮背景图不同
        var btns = document.querySelectorAll(".btn");
        for (var i = 0; i < btns.length; i++) {
            btns[i].index = i;
            btns[i].onclick = function() {
                // console.log(1)
                var index = this.index;
                // console.log("url(img/0" + (index + 1) + ".png) no-repeat center center ")
                document.body.style.background = "url(img/0" + (index + 1) + ".png) no-repeat center center ";
            }
        }
</script>

排他操作

  // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }

自定义属性操作

获取属性值

element.属性获取属性值
element.getAttribute(“属性”);

区别

element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute(“属性”)；主要获得自定义的属性（标准）为我们程序员准备的

   <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

设置属性值

element.属性 =“值” 设置内置属性值
element.getAttribute(“属性”，“值”)；

区别：

第一个是设置内置属性值；第二个是设置自定义属性值；

   // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

移出属性

element.removeAttribute(“属性”)；

H5自定义属性

（1）设置属性：

（2）获取属性：element.dataset.index

节点

节点：节点类型==>nodeType 节点名称==>nodeName 节点值==>nodeValue

父级节点：node.parentNode

子节点：parentNode.children

创建节点

document.createElements(‘toName’);

是一个动态创建的节点

添加节点：document.appendChild(child)

删除节点：node.removeChild()

JS事件知识

注册事件

<button id="btn1">
    绑定方法一
</button>
<button onclick='fun'>
    绑定方法二
</button>
<button id="btn3">
    绑定方法三
</button>
<script>
var btn1=document.getElementById('btn1');
    btn1.onclick=function(){
        alert(1);
    }
 var fun=function(){
     alert(2);
 }
 var btn3=docment.querySelector("#btn3");
    btn3.addEventListener("click",function(){
        alert(3);
    },false);
</script>

事件监听

addEventListener() 事件监听（IE9以后支持）

div.addEventListener(“click”,function(){},false);

事件对象

event 为事件对象

event.target是返回触发时间的对象

鼠标事件对象

event是事件对象的事件相关的一系列信息的集合

鼠标事件：MouseEvent 键盘事件：EeyboardEvent

BOM

(1)定时器（两种）

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()
setInterval()

setTimeout() 炸弹定时器

开启定时器

普通函数是按照代码顺序直接调用。

简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。

以前我们讲的   element.onclick = function(){}   或者  element.addEventListener(“click”, fn);   里面的 函数也是回调函数。

    <script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');

         }, 2000);
        function callback() {
            console.log('爆炸了');
        }
		// 回调函数是一个有名函数
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
    </script>

案例：5秒后关闭广告

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        // 获取要操作的元素
        var ad = document.querySelector('.ad');
		// 开启定时器
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

停止定时器

    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
		// 开启定时器
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
		// 给按钮注册单击事件
        btn.addEventListener('click', function() {
            // 停止定时器
            clearTimeout(timer);
        })
    </script>

setInterval() 闹钟定时器

开启定时器

    <script>
        // 1. setInterval 
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
    </script>

案例：倒计时

    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素（时分秒盒子） 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 

        // 2. 开启定时器
        setInterval(countDown, 1000);
		
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>

停止定时器

案例：发送短信倒计时

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。

    手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
		// 全局变量，定义剩下的秒数
        var time = 3; 
		// 注册单击事件
        btn.addEventListener('click', function() {
            // 禁用按钮
            btn.disabled = true;
            // 开启定时器
            var timer = setInterval(function() {
                // 判断剩余秒数
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>

(2). location对象

什么是 location 对象

URL

location 对象的属性

案例：5分钟自动跳转页面

    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'https://www.baidu.com';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'https://www.baidu.com';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>

三、JS执行机制

以下代码执行的结果是什么？

 console.log(1);
 
 setTimeout(function () {
     console.log(3);
 }, 1000);
 
 console.log(2);

以下代码执行的结果是什么？

 console.log(1);
 
 setTimeout(function () {
     console.log(3);
 }, 0);
 
 console.log(2);

3.1 JS 是单线程

	单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
	这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

3.2 同步任务和异步任务

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

console.log(1);

setTimeout(function () {
console.log(3);
}, 0);

console.log(2);


## 3.1 JS 是单线程

[外链图片转存中...(img-Id8UiMIi-1636445027392)]

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。


## 3.2 同步任务和异步任务

### 同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。


### 异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。


[外链图片转存中...(img-bOs0RW41-1636445027393)]

[外链图片转存中...(img-ygMA3KfJ-1636445027394)]