javascript 多个同样按钮触发同一个事件_「融职培训」Web前端学习 第3章 JavaScript基础教程14 DOM基础...

一、DOM的基本概念

本章节可谓是相当重要了,是让JavaScript灵动起来必不可少的一步

• 文档对象模型
• 定义了树状结构
• 定义了接口，可以用来操作树状结构

二、样式操作

我们可以通过DOM提供的querySelector方法来获取元素，然后进一步操作它的样式示例代码如下:

1 

DOM样式测试

2

若需要通过js设置多个元素的样式，可以使用querySelectorAll方法，示例代码如下:

 1 

2 香蕉 3 苹果 4 鸭梨 5 6

我们将一个函数赋值给一个事件，当这个事件被触发的时候，这个函数就会被执行。

四、操作属性

我们可以通过JavaScript获取和设置元素属性，例如input的value属性值，或者img的src属性。

首先我们来实现一个效果，在文本框中输入字符串，然后点击按钮用在控制台输出我们输入的字符串示例代码如下:

 1  2 输出 3 

我们还可以通过赋值的方式为一个元素设置属性,可以切换所示图片示例代码如下：

1 2 切换图片3 

当点击按钮的时候，通过赋值的方式把另一张图片的地址赋值给img标签的src属性，就实现了图片切换的效果

五、数学计算案例

下面我们来实现一个能完成数学计算的程序，页面有四个文本框和一个按钮，我们在第一个文本框输入一个数字，在第二个文本框输入一个操作符，第三个文本框再输入一个数字，然后当我们点击计算按钮的时候，会在第四个文本框计算出结果,这个例子和我们学习switch语句的时候写的例子很像，但是那时候我们没有可操作的页面，现在我们把计算功能写在一个函数中。示例代码如下:

 1      2      3      4      5     计算 6     

【融职教育】在工作中学习，在学习中工作