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

最新推荐文章于 2024-09-24 09:43:15 发布

冉冉编程

最新推荐文章于 2024-09-24 09:43:15 发布

阅读量8.4k

点赞数 4

分类专栏： js 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_57244464/article/details/125701717

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中JavaScript的三种引入方式：行内式、内嵌式和外链式，并强调了JavaScript代码执行与HTML文档流的关系。通过示例代码展示了如何在页面加载完成后执行JS代码，确保能正确操作DOM元素。同时，讨论了script标签的位置对代码执行的影响及其解决方案。

摘要由CSDN通过智能技术生成

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）