当前位置：首页 > 行业动态 > 正文

htmljs调用html

admin
行业动态
2025-05-02
5

在HTML页面中，可通过document.getElementById(“元素ID”)或document.querySelector(“选择器”)获取DOM元素，再用element.innerHTML/textContent修改内容，或element.addEventListener

HTML与JavaScript交互方式

基础调用方法

方式	说明	示例代码
内联脚本	直接在HTML标签中嵌入`<script>`标签，可包含JavaScript代码或引用外部文件	`<script>alert("Hello");</script>`
外部脚本	通过`<script src="path">`引入外部JS文件，适用于复用代码	`<script src="app.js"></script>`
模块化脚本	使用`type="module"`加载ES6模块，支持`import/export`语法	`<script type="module" src="main.js"></script>`

示例：外部脚本调用

<!DOCTYPE html>
<html>
<head>外部脚本调用</title>
  <script src="utils.js"></script> <!-外部工具函数 -->
</head>
<body>
  <script src="main.js"></script> <!-主逻辑脚本 -->
</body>
</html>

事件处理驱动调用

事件类型	触发时机	适用场景
DOMContentLoaded	DOM树构建完成，但图片/样式未加载完毕	初始化页面交互逻辑
load	所有资源（图片、样式等）加载完成	执行依赖资源的逻辑
自定义事件	通过`addEventListener`绑定特定事件（如点击、输入等）	用户交互响应

示例：DOM加载后执行代码

htmljs调用html 第1张

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM已加载，可以操作元素');
  document.getElementById('btn').addEventListener('click', handleClick);
});
function handleClick() {
  alert('按钮被点击！');
}

动态加载脚本

方法	说明	代码示例
createElement	动态创建`<script>`标签并插入DOM，可控制加载顺序	`dynamicScriptLoading();`
appendChild	将脚本标签追加到`<head>`或`<body>`，立即开始加载
错误处理	通过`onerror`捕获加载失败情况	`script.onerror = () => console.error('加载失败');`

示例：动态加载外部脚本

function dynamicScriptLoading() {
  const script = document.createElement('script');
  script.src = 'https://cdn.example.com/library.js';
  script.async = true; // 异步加载，不阻塞页面
  script.onload = () => console.log('脚本加载成功');
  script.onerror = () => console.error('脚本加载失败');
  document.head.appendChild(script);
}
dynamicScriptLoading();

相关问题与解答

问题1：如何确保JavaScript在DOM完全加载后执行？

解答：
使用DOMContentLoaded事件监听器，该事件在HTML文档完成解析后触发（不等待图片/样式加载），示例：

document.addEventListener('DOMContentLoaded', function() {
  // 安全操作DOM元素
  document.querySelector('#app').innerHTML = '内容已加载';
});

问题2：动态加载脚本时如何检测加载失败？

解答：
为动态创建的<script>标签添加onerror回调，示例：

const script = document.createElement('script');
script.src = 'https://example.com/script.js';
script.onerror = function() {
  console.error('脚本加载失败，请检查网络或路径');
};
document.body.appendChild(script);

javascript