JavaScript是一种用于创建和控制动态网站内容的编程语言，是开发交互式Web界面的最佳选择之一。那么，其交互性体现在哪些方面？如何实现基本的交互式操作？下面我们一起来深入学习一下 JavaScript的三大基本操作，分别是改变HTML内容，改变HTML属性以及改变HTML样式。希望通过案例讲解，大家可以快速掌握这些基本操作。
1、JavaScript改变HTML内容
我们先通过一个实例，为大家讲述Javascript如何改变HTML的内容。首先我们要实现的效果是通过点击按钮，即可改变页面的内容，实现内容的切换。比如点击按钮，欢迎来到学致”变为“Hello xuezhi!”。要实现上述案例效果，其实很简单，基本操作只需要四步：
（1）添加一个按钮。
在body中插入button标签实现按钮：
<button type="button">点击</button>
（2）在按钮上绑定onclick点击事件。
在按钮元素中，添加一个点击事件 onclick属性，如下所示：
<button type="button" onclick="">点击</button>
（3）获取id="demo"的元素标签。
首先，我们如何获取HTML元素呢？获取之前我们需要使用Document对象，那么，什么是Document对象？Document是一个对象，它的作用是当浏览器载入HTML文档， 即可生成 Document 对象，Document对象是HTML文档的根节点，帮助我们从脚本中对HTML 页面中所有元素进行访问。我们使用getElementById() 方法来获取id="demo"的元素标签：
<p id="demo">欢迎来到学致。</p><button type="button" onclick='document.getElementById("demo")'>点击</button>
（4）使用innerHTML修改HTML内容（将”欢迎来到学致“ 更改为”Hello xuezhi!“）。
修改HTML内容，我们通过innerHTML 属性，可设置或返回表格行的开始和结束标签之间的 HTML，也就是，可以对应的获取/赋值元素内容。直接为innerHTML属性赋值，将"欢迎来到学致"内容设置为 “Hello xuezhi!”。
<button type="button" onclick='document.getElementById("demo").innerHTML= "Hello xuezhi"'>点击</button>
2、JavaScript改变HTML属性
我们通过点击按钮即可改变页面HTML属性，实现图片切换。该效果是网页中最常见的功能，也是前端开发必须掌握的最基本的技能。那么，该如何实现呢？下面以白天和黑夜两个图片的切换效果为例，为大家讲解 JavaScript的基本操作：
（1）添加白天和黑夜两个按钮。
<button>白天</button><button>黑夜</button>
通过button标签添加两个白天和黑夜两个按钮。
（2）在按钮上绑定点击事件onclick。
<button onclick="">白天</button><button onclick="">黑夜</button>
分别为button标签添加对应的onclick事件。
（3）获取图片元素。
若要替换图片，首先就要获取图片元素；那么，如何获取图片元素呢？首先，需要定义图片标签，然后标签内定义一个名称，将id设置为myImage；我们通过id来获取当前图片，代码如下：
<!--图片--><img id="myImage" border="0" src="./imgs/35.jpg">
然后，获取id为myImage的图片元素，代码如下：
<!--按钮--><button onclick="document.getElementById('myImage')">白天</button><button onclick="document.getElementById('myImage')">黑夜</button>通过document.getElementById方法获取标签，就获取到了对应图片元素。
（4）更换图片路径。
使用图片标签 内的src属性来改变（src属性是图片路径），将图片设置为新路径来实现图像变换。若我们点击按钮，将src属性的值改变为xx.jpg新图片，如下所示：
document.getElementById('myImage').src='xx.jpg'我们设置对应的两个按钮，改变src属性值，将其设置为对应的图片代码如下：
<button onclick="document.getElementById('myImage').src='./imgs/35.jpg'">白天</button><button onclick="document.getElementById('myImage').src='./imgs/36.jpg'">黑夜</button>这样我们通过点击按钮改变标签src属性了 , 完成了图片路径的改变。
3、JavaScript改变HTML样式
改变HTML的样式，实现字体大小样式的变化，是网页中最常见的功能，也是前端开发必须掌握的最基本的技能。那么，上述HTML样式的改变是如何实现的呢？基本操作步骤如下：
（1）添加一个按钮。
<button>点击</button>
我们通过button标签实现“点击”按钮的添加。
（2）在按钮上绑定onclick点击事件。
<button onclick="">点击</button>
在上述代码中，实现了在button标签上添加onclick点击事件。
（3）获取显示文字的元素。
改变字体大小之前，我们要先获取显示文字的元素；那要如何获取显示文字的元素呢？首先，定义文字显示的div标签，代码如下：
<!--标签--><div id="demo"></div>
然后，获取id="demo"的元素，代码如下：
<!--按钮--><button type="button" onclick="document.getElementById('demo')">点击</button>通过document.getElementById方法来获取id="demo"的div标签，这样就获取到div标签。接下来，就可以实现改变文字大小了。
（4）改变文字大小。
这一步需要使用innerHTML；因为HTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 元素的样式，是改变 HTML 属性的一种变种。该案例的示例代码如下：
<button type="button"onclick="document.getElementById('demo').style.fontSize='30px'">点击</button>网页默认字体大小为12像素，此处咱们通过style.fontSize将字体大小设置为30像素；也就说，将点击按钮之后呈现的文字设为30像素。
以上就是JavaScript的三大基本操作案例讲解，大家都掌握了吗？
扫描下方二维码
获取web前端、学习资料视频
备注‘公众号’
