1. 行内式

（其中onclick是绑定一个点击事件的意思，alert()是js内置的弹出警示框的方法）

2. 内嵌式

alert('我是内嵌式');

</script>

（在script标签内部编写js代码即可）

3. 外链式

（注意：使用外链式引入 js 时，不可以再向引入js文件的那个 script 标签中再写 js 代码；但在其他的script标签中写js代码是完全可以的！）

最后，需要注意到的是，内嵌式和外链式我们都需要用到 "script" 标签。

然后问题就是script标签我们应该放在哪里呢？

这个要我们先大致了解一下html代码的执行顺序是一个文档流，就是自上到下去执行的。

所以在页面结构之前使用script标签引入js代码时，默认情况下其中的js代码访问不到页面中的DOM元素，因为当执行js代码时还未加载页面结构。

解决方案有两种：一种是将script标签放在页面结构之后，这样就可以等页面加载完再去执行js代码；第二种解决方案是我们可以将js代码写入浏览器对象的load事件的处理函数中，它代表的意思就是等页面加载完毕再去执行js代码，这样就可以获取到页面中的DOM元素了，具体代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>将js引入html的三种方式</title><script>window.addEventListener('load',() => {var div = document.querySelector('div');console.log(div.innerHTML);})</script>
</head>
<body><div>你好</div>
</body>
</html>

前端笔记（js基础，DOM，BOM）

（二）js在html中调用的三种方式相关推荐

【玩转SQLite系列】(二)SQLite创建和打开数据库的三种方式
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53234396 本文出自[DylanAndroid的博客] [玩转SQLite系 ...
python的命名空间_python中命名空间的三种方式介绍（附示例）
本篇文章给大家带来的内容是关于python中命名空间的三种方式介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. python中的命名空间分三种: 内置的命名空间,在启动解 ...
【opencv学习笔记】第五篇：访问图像中像素的三种方式、ROI区域图像叠加和图像混合
1. 访问图像中像素的三种方式任何图像处理算法,都是从操作每个像素开始的.在OpenCV中,提供了三种访问每个像素的方法. 方法1:指针访问:C操作符[] 方法2:迭代器iterator 方法3:动 ...
C++使用命名空间中成员的三种方式
通过简单的代码来介绍使用命名空间中成员的三种方式(我们最常用到的命名空间是是标准库std,下面的命名空间都以std为例): 使用作用域符:: 1 #include<iostream> 2 ...
基于unet神经网络上采样中的的三种方式的理解
关于前言随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容中的一个知识点-上采样. 一.基于unet神经网络上采样中的的三种方式的理解 ...
Linux中软件自启动三种方式
一.介绍 Linux环境中软件自启动的三种方式,测试环境为Centos7.三种方式为: 1.systemd服务 2.使用 /etc/rc.d/rc.local 3.使用crontab定时计划中的@re ...
【面试】JAVA中交换值的三种方式
方式一:异或法 int i = 5, j = 9; i = i ^ j; j = i ^ j; -> j = i ^ j ^ j; -> j = i; i = i ^ j; -> i ...
简单了解计算机网络中数据传输的三种方式
简单理解数据传输:计算机之间实现远程文件和多媒体信息获取和发送的行为. 准确理解数据传输:按照一定的规程,通过一条或者多条数据链路,将数据从数据源传输到数据终端,它的主要作用就是实现点与点之间的信息传 ...
[js]绑定点击事件的三种方式
绑定点击事件的三种方式使用 onclick 属性(不推荐) <!doctype html> <html lang="en"> <head>&l ...

（二）js在html中调用的三种方式

1. 行内式

2. 内嵌式

3. 外链式

（二）js在html中调用的三种方式相关推荐

最新文章

热门文章