一、DOM的基本概念

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

文档对象模型

定义了树状结构

定义了接口，可以用来操作树状结构

二、样式操作

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

示例代码如下:

1

DOM样式测试

若需要通过js设置多个元素的样式，可以使用querySelectorAll方法，

示例代码如下:

1

2
• 香蕉
3
• 苹果
4
• 鸭梨
5

三、绑定事件

事件就是文档或者浏览器窗口发生的一些特定的交互瞬间，例如：用户点击网页会触发点击事件（onclick），用户在元素上移动会触发鼠标移动事件（onmouseover）,鼠标移出(onmouseout)又恢复原本模样等。下面我们来定义一个点击事件，当我们点击一个按钮的时候，弹出"hello world"

示例代码如下:

1按钮23varbtn = document.querySelector("button");4btn.onclick =function(){5console.log("hello world");6    }7

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

四、操作属性

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

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

示例代码如下:

1 2输出 3 4varinput = document.querySelector("input"); 5varbtn = document.querySelector("button"); 6btn.onclick =function(){ 7vartext = input.value;//获取input的value属性 8        console.log(text); 9    }10

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

示例代码如下：

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

五、数学计算案例

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

示例代码如下:

1 2 3 4 5计算 6 7varnum1 = document.querySelector("#num1"); 8varsign = document.querySelector("#sign"); 9varnum2 = document.querySelector("#num2");10varresult = document.querySelector("#result");11varbtn = document.querySelector("button");12btn.onclick =function(){13varn = Number(num1.value);//将字符串类型转换成数字类型14varm = Number(num2.value);15varr = count(n,sign.value,m);16result.value = r;17        }18functioncount(n,s,m){//n是第一个数字，s是操作符，m是第二个数19switch(s){20case"+":returnn+m;break;21case"-":returnn-m;break;22case"*":returnn*m;break;23case"/":returnn/m;break;24            }25        }26

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