JavaScript之WebAPI

新鲜出炉，前端三剑客到今天就介绍结束啦~

目录

1.什么是WebAPI

2.DOMAPI

2.1获取元素

2.2事件初识

2.3操作元素

2.4操作节点

3.两个案例

3.1猜数字案例

3.2表白墙案例

---

1.什么是WebAPI

  前面学习的 JS 分成三个大的部分 ：ECMAScript: 基础语法部分；DOM API: 操作页面结构；BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

2.DOMAPI

①什么是DOM？9

DOM 全称为 Document Object Model（文档指的是界面显示的部分，对象指的是js中代码操作的部分，通过这两个配合使界面产生改变）

DOMAPI是js提供给浏览器的一组用来操作页面元素的API。主要是进行以下三个部分元素的操作。

a.获取元素（.querySelector/querySelectorAll）

b.事件处理（.onclick）

c.操作元素内容（.innerHTML）

②什么是DOM树？

一个页面的结构是一个树形结构 , 称为 DOM 树。类似于我们前面学的文件的存储路径，也可以通俗地说成家谱。下面我们列出一个页面结构的DOM树的结构，便于理解。

在这里面，仍然有几个概念需要我们进一步重视：

a.文档：一个页面就是一个文档，用document来进行表示。

b.元素：页面中的所有标签都可以被称为元素，用element来进行表示。

c. 节点：网页中的所有内容都可以称为节点（标签节点，注释节点，文本节点），用node来进行表示。

2.1获取元素

①什么是获取元素：

这部分工作类似于 CSS 选择器的功能。要想操作页面上的元素，就需要先拿到对应的js对象。

②怎么获取元素呢？（这里只介绍下面这两种相对重要的API）

我们常使用querySelector/querySelectorAll来实现。这两个元素其实是一个document这样的对象的属性。（当一个页面加载好之后，就会自动生成一个全局变量，叫做document），在这里面就会有一些属性和方法，通过这些属性和方法来操作页面的内容

③演示querySelector:(核心代码如下)

	

		hello
	
	

		hello1
	
	

		
aaa
	
   

注意！！！

当querySelector的参数的选择器，匹配到了多个元素的时候，这个时候返回的对象是匹配的第一个元素，演示如下：

要是，我们想所有的元素都被选中，那么我们就应该用querySelectorAll。

④演示querySelectorAll:(核心代码如下)

body>
	

		
aaa
		
bbb
	
   

显示结果如下：

 这个时候，是以数组的方式对结果进行呈现。但是准确地来说，它返回的不是一个真正意义上的原生数组，而是一个对象，只不过这个对象有length，也能够通过下标来访问内部元素。这样的对象使用起来和数组非常相似，我们称其为“伪数组”。

2.2事件初识

①什么是事件？

在js中，很多代码都是通过事件来实现的。事件就是浏览器对于用户的操作的一个统称（准确的说,事件也不一定全是用户操作产生的,但是大部分是的）。

通俗的举个例子，我们使用鼠标进行移动光标是一个事件，我们使用鼠标在页面的某个位置进行点击，也是一个事件等待。其中js主要的工作就是在不同的事件中进行不同的处理。

②事件的三要素：

a.事件源：哪个HTML产生的元素

b.事件类型：鼠标移动，鼠标点击，窗口大小切换

c.事件处理程序：当事件产生和，执行样的js怎代码

③举个典型例子（点击事件）

 换一种写法：（核心代码）

 

	
	
	请按按钮
   

 但在实际上，我们更建议使用第一种写法。这种写法使得页面 更加整洁。

2.3操作元素

①操作元素的含义：

操作元素中，操作=获取+修改

②操作的形式：

a.操作元素内容：

通过对象里面的一个属性，innnerHTML来实现（也就是获取到元素中的代码是怎样的）

但是当我们不断按按钮时，会出现相同结果叠加的情况

 那么，怎么才能使我们的结果不叠加呢？其实很简单，我们只需要对其进行基本的设置就OK。如下图所示：

刚刚我们操作的都是获取内容的按钮，下面我们写一下修改内容的核心代码：

案例一：修改原内容

welcome to js
获取内容的按钮
修改内容的按钮
   

案例二：实现plus操作（核心代码）

	
0
	+
    

通过input标签来添加一个边框，来实现加的操作。（核心代码如下：）

	
	+
    

b.操作元素的属性：

通过dom对象.属性名来进行操作。

案例一：（通过以下代码实现点击切换图片的效果）

下面我们介绍几个表单的专有属性。

value： input 的值.

disabled：禁用;

checked：复选框会使用;

selected：下拉框会使用;

type：input 的类型(文本, 密码, 按钮, 文件等);

案例二：切换按钮的显示文本

注意：在input中选中元素是.value不是用.innerHTML

案例三：通过切换checked值来实现全选效果

	all

	apple

	watermelon

	grape

	strawberry

    

结果展示：

 c.操作元素的样式：

本质上也是操作元素的属性。我们这里有两个操作。注意：css中一般不用驼峰，而js通常用驼峰，css中的-转换成下个字母的驼峰。

案例一：点击字体放大

一个是style对应行内样式（直接把样式写到style里面）

这是个文本
    

案例二：实现一个夜间模式

第二个是className/classList对应内部样式/外部样式。应用了一个/一组css类名。

在HTML中,表示类名的属性就是class,但是在JS里,属性名变成了className/classList为啥不直接使用class这个名字？class在js中也是一个关键字。

对于修改样式较多的来说，通过style进行修改就显得非常麻烦，所以我们可以直接借助CSS类来修改，把要修改的属性放在一个类里。

核心代码如下;

 
    
    
一段文字
    关灯
    
	 

得到的效果，如下所示：

2.4操作节点

对于节点的操作，实质上就是新增节点和删除节点。下面我们就对这两个 操作进行详细的讲解。

①新增节点：

a.创建新节点:使用createElement来创建一个元素

b.把节点挂在dom树上:使用appendChild把节点插入到某个节点的子元素中

核心代码：

②删除节点：（通过removeChild来对节点进行删除）

先拿到父节点然后在拿到待删除的子节点就可以进行删除了

在上述新增节点的基础上来对节点进行删除，核心代码如下：

	

    
    
        点击删除
        
 
	 

3.两个案例

这两个案例实际上是对间断性学习的一个总结。

3.1猜数字案例

核心代码如下：需要注意的地方都写在代码中啦

    
    


重新开始游戏

要猜的数字: 

猜

结果: 

已经猜的次数: 0

   

输出结果展示：

3.2表白墙案例

    
    


    
    

        
表白墙
        
输入后点击提交, 会将信息显示在表格中
        

            表白者: 
            
        
        

            被表白者: 
            
        
        

            表白内容: 
            
        
        

            提交
        
    

    

效果展示图如下：

本节内容就到这里啦，今天涉及的案例都是仅有前端内容构成~