文章目录

WebAPI简介

什么是API
应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易的创建复杂的功能。API中提供了很多的网络接口供开发者使用。

JS基本上可以分为三大类：

  • ECAMScript:基础的JS语法
  • DOM API:操作网络页面结构
  • BOM API：操作浏览器

本文介绍的webAPI主要包含了DOM 和BOM部分，基础的JS语法在前几篇文章中已经基本介绍了一些，这里就不在介绍。

下面附上API官方参考文档。
https://developer.mozilla.org/zh-CN/docs/Web/API

Dom

什么是Dom

文档对象模型(DOM,全称Document Object Model.)是HTML和XML文档的编程接口。它提供了对文档的结构化表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的接口，样式和内容。DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的集合。

上面是比较复杂 的官方定义，其实就是W3C标准给我们提供了一些已经写好的函数，我们可以直接使用，可以用这些函数来操作网页内容、网页结构、网页样式。

Dom树

当一个新的网页被加载时，浏览器就会创建该页面的文档对象模型（Dom）.这个Dom模型会被结构化为一个 存放对象的树结构。这个树结构就是 Dom树。

结构如下：
在这里插入图片描述
Dom树中的一些概念：

  • 文档：一个网络页面就是一个文档，即document表示

  • 元素：页面中的所有标签（tag）都称为元素，即element。

  • 节点：网页中的所有内容都可以称为 节点（像标签节点，文本节点，属性节点，注释节点等），即node.

这些文档在JS源码中就对应了一个个的对象。所以才会称为“文档对象模型”。

获取Dom元素

一个Dom树上面有很多很多的对象，再进行操作之前必须先选中对象。Dom API 中提供了很多能够用来选中对象/元素的函数 在本文中我们只介绍最常用功能最强大的两个。
分别是querySelector 和querySelectAll

只有新版本的浏览器才支持（比如IE9之前并不支持）像主流的 浏览器chrome,firefox,edge都是支持的，没有任何问题。

querySelector

querySelector函数的参数是一个“字符串”，而且这个字符串必须是CSS选择器。

当代码中存在多个相同名称的标签时，选择器在进行选择时，会返回被选中元素的第一个（即第一个出现的元素）。
如果想要全部返回，可以使用querySelectAll，会将所有相同名称的标签元素以NodeList（伪数组）的形式，全部返回。

当我们在document上调用这两个方法的时候，相当于从页面对 全局来查找复合要求的元素。
如果是在某个具体的dom对象上调用这两个方法，相当于从这个元素里面来查找复合要求的元素

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--创建父元素 parent,及三个子元素child1,2,3-->
<div class="parent">
    <div class="child-1">1</div>
    <div class="child-2">2</div>
    <div class="child-3">3</div>
</div>

<script>
    //选中的结果是一个“元素”，即elem
    let elem=document.querySelector('div');
    console.log(elem);
</script>
</body>
</html>

输出结果：
在这里插入图片描述
querySelectAll

和querySelector使用方法类似。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--创建父元素 parent,及三个子元素child1,2,3-->
<div class="parent">
    <div class="child-1">1</div>
    <div class="child-2">2</div>
    <div class="child-3">3</div>
</div>

<script>
    //选中的结果是一个“元素”，即elem
    let elem=document.querySelectorAll('div');
    console.log(elem);
</script>
</body>
</html>

输出：
在这里插入图片描述

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
console.log(elems);
</script>
事件

一些复杂的程序，往往涉及到组件之间相互通信。
事件机制（event）就是非常典型的组件通信机制。

事件是用户和程序之间的桥梁。

JS要构建动态页面，就需要感知到用户的行为，当用户对页面进行的一些操作（点击，修改，选择额，浏览）等都会在浏览器中产生一个个的事件，当JS捕获到这些事件，就会运行该事件对应的程序，从而实现复杂的交互操作。

事件三要素

1.事件源：被触发的对象
2.事件类型：事件触发的方式
3.事件处理程序：事件触发后，执行的程序。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="我是一个按钮">

<script>
    let button=document.querySelector('input');
    button.onclick=function(){
        alert("hello");
    }
</script>
</body>
</html>

上面的代码中，button是事件源（用户能操作的元素），click就是事件类型（点击事件),通过onlick属性 就能关联到一个具体的事件处理函数。当button触发了click事件(当用户点击了这个按钮后)，就会自动调用onclick对应的函数。

操作dom元素

获取/修改元素内容

在CSS的盒模型中，我们已经知道了一个盒子的组成：外边距、边框、内边距、内容。我们要获取和修改的 就是最后的内容。这个内容可能是一个文本，也可能是一个图片，也可能是个链接等，本质上都是一段html代码片段，我们要获取/修改的内容就是这段html片段。

innerHTML

通过element.innerHTML属性就可以设置和获取该元素的内容。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="parent">
    hello
</div>

<button>点击按钮，改变文本</button>
<script>
    //选中button按钮
    let button =document.querySelector('button');
    button.onclick=function () {
        //选中parent元素
        let parent=document.querySelector('.parent');
        //修改parent的内容
        parent.innerHTML='word';
    }
</script>
</body>
</html>

运行：
在这里插入图片描述

该属性不仅可以赋值文本，还可以赋值一个html片段。
在这里插入图片描述

innerText

通过element.innerText属性可以设置和修改一个元素及其子元素的文本内容。

// 读操作
var renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string;

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取 div 内部内容
    console.log(div.innerText);
    // 修改 div 内部内容, 界面上就会同步修改
    div.innerText = 'hello js <span>hello js</span>';
</script>

通过上面的代码可知，innerText属性无法获取到div内部 html代码片段，只能得到文本内容。

实战案例：实现网页计数器

通过html,css，js目前掌握的知识，我们可以做一个小练习，实现一个简单的计数器，类似的按键功能可以重复添加，所以这里尽量简化，以加减举个例子。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    
<!--  先清除浏览器默认样式 -->
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /*设置父元素的样式：长度，宽度，背景色*/
    .parent {
        width: 500px;
        height: 300px;
        background-color: gray;
        
        /*水平位置居中*/
        margin: 0 auto;
    }
    /*子元素screen的样式*/
    .parent .screen{
        width: 200px;
        height: 150px;
        font-size: 30px;
        line-height: 150px;
        color:white;
        margin: 0 auto;
        
        /*位置居中*/
        text-align: center;
    }
    .parent .ctrl{
        width:360px;
        height:150px;
        margin: 0 auto;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /*按钮样式*/
    .parent .ctrl button{
        width: 100px;
        height: 50px;
        font-size: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        
        /*去掉自带的黑色边框*/
        border:none;
    }
    .parent .ctrl button:active{
        color:white;
        background-color: blue;
    }
</style>
<body>
<div class="parent">
<!--通过screen来显示数字-->
    <div class="screen">0</div>
    <div class="ctrl">
        
<!-- 子元素按钮-->
        <button id="plusButton">+</button>
        <button id="zeroButton">清零</button>
        <button id="minusButton">-</button>

    </div>
</div>

<script>
    // 按钮监听事件 
let plusButton=document.querySelector('#plusButton');
 plusButton.onclick=function(){
    //1.选中screen 元素
     let screen=document.querySelector('.screen');
     //2. 取出其中的元素
     let content=screen.innerHTML;
     //3.将内容+1
     let result=parseInt(content)+1;
     //4.重新写入内容
     screen.innerHTML=result;

}




let minusButton=document.querySelector('#minusButton');
minusButton.onclick=function() {
    //1.选中screen 元素
    let screen = document.querySelector('.screen');
    //2. 取出其中的元素
    let content = screen.innerHTML;
    //3.将内容-1
    let result = parseInt(content) - 1;
    //4.重新写入内容
    screen.innerHTML = result;
}

let zeroButton=document.querySelector('#zeroButton');
zeroButton.onclick=function() {
    //1.选中screen 元素
    let screen = document.querySelector('.screen');
    //2. 取出其中的元素
    let content = screen.innerHTML;
    //3.将内容-1
    let result = parseInt(content) *0;
    //4.重新写入内容
    screen.innerHTML = result;
}


</script>
</body>
</html>

效果如下：
在这里插入图片描述

# javascript # 前端 # html # css # 开发语言
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区