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

将 js代码引入 html 的三种方式

冉冉编程

8197人浏览 · 2022-07-10 07:52:16

冉冉编程 · 2022-07-10 07:52:16 发布

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）