网页设计基础第三十八讲：JavaScript基础教程：事件绑定与DOM操作实践（二）

TechLearn
1,358 阅读3分钟

本文通过具体的实例，如点击按钮弹出提示信息和根据用户输入显示图片，详细讲解了JavaScript中如何获取HTML元素、绑定事件以及使用innerHTML属性来改变页面内容。适合初学者学习并掌握基本的网页交互开发技巧。通过完成本文的任务，读者将能够创建一个简单的互动网页，加深对JavaScript事件处理和DOM操作的理解。

知识讲解

事件是指对网页和元素使用鼠标或键盘所执行的某项操作。比如鼠标点击，鼠标悬停，键盘按下等。此处只简单讲解单击事件的绑定。

语法

元素.onclick = function(){
   //单击后要执行的功能
}

示例

点击按钮，弹出输入框，输入内容后，在控制台打印

<!--html-->
<button>点我吧</button>

//JavaScript
<script>
    let button = document.querySelector("button");
    button.onclick = function(){
        let num = prompt("请输入一个两位整数：");
        console.log(num);
    }
</script>

实验实训 按钮事件绑定

任务需求

任务目标

1、掌握元素的获取

2、掌握事件的绑定

任务描述

1、在项目中创建网页bind-event.html和bind-event.js

2、在网页中添加一个按钮

3、为按钮绑定一个点击事件，点击按钮后使用alert弹出提示信息“我的名字叫xxx”；

元素内部脚本的获取和改变

innerHTML是HTML元素的一个属性，此属性可以用于获取元素的内部脚本，也可以用于改变元素的内容

语法

let html = 元素.innerHTML; //获取元素中的内容
元素.innerHTML = html;//改变元素中的内容

1、获取元素的内部脚本

以下示例中获取ul标签的内部脚本

<!--html-->
<ul>
    <li><a href="#">创蓝IT教育</a></li>
</ul>
//javascript
let ul = document.querySelector("ul");
let html = ul.innerHTML;
console.log(html);

运行后控制台的打印效果如下

2、改变元素的内容

以下示例把div中的图片换成了超链接

<!--html-->
<div>
    <img src="img/logo.png" alt="">
</div>

//JavaScript
<script>
    let div = document.querySelector("div");
   div.innerHTML = '<a href="#">创蓝IT教育</a>'
</script>

运行后浏览器中显示的内容如下

任务描述

任务需求

1、在项目javascript-ch02中添加image-tab.html和image-tab.js

2、在页面中添加一个名为“选择图片”的按钮和一个div标签，当点击按钮时，弹出输入框，在输入框中输入图片路径后点击“确定”，在div标签中显示对应的图片。

3、要求使用外部脚本

提示：提前把图片复制到项目的img目录中，在输入框中输入相对路径

任务目标

1、掌握元素的获取

2、掌握事件的绑定

3、掌握元素内容的替换

任务实施

1、在项目javascript-ch02的根目录中添加网页image-tab.html，在网页中添加一个按钮和div

2、在js目录中添加js文件image-tab.js

3、在js中获取按钮和div

let btn = document.querySelector('button');
let div = document.querySelector('div');

4、绑定按钮的单击事件

btn.onclick = function(){    }

5、弹出输入框接收图片路径

let src = prompt('请输入图片的路径：');

6、使得innerHTML显示图片

div.innerHTML = '<img src="'+ src +'">';

7、在网页中引用js文件

avatar
文章
阅读
粉丝