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

html应用js

HTML应用JS可通过“标签嵌入，实现动态内容与交互功能，如DOM操作、事件监听，提升网页响应

HTML与JavaScript基础应用

JavaScript的引入方式

方式 说明 示例代码
行内脚本 直接在HTML元素事件属性中写JS代码 <button onclick="alert('Clicked')">点击</button>
内联脚本 在<script>标签中编写JS，通常放在<head>或<body>底部 html <script> alert('页面加载完成'); </script>
外部脚本 通过.js文件引入，需在HTML中用<script src="path.js"></script> <script src="main.js"></script>

DOM操作基础

  • 获取元素： 

    // 通过ID获取
const elem = document.getElementById('id');
// 通过类名获取（返回数组）
const elems = document.getElementsByClassName('class');
// 通过标签名获取（返回数组）
const tags = document.getElementsByTagName('div');
// 通过CSS选择器获取（返回单个）
const box = document.querySelector('.box');
// 通过CSS选择器获取（返回数组）
const boxes = document.querySelectorAll('.box');

  • 与样式： 

    box.innerHTML = '新内容'; // 修改文本或HTML
box.style.color = 'red'; // 修改内联样式
box.classList.add('active'); // 添加/删除类名

事件处理

  • 绑定事件： 

    const btn = document.getElementById('btn');
// 传统方式
btn.onclick = function() { console.log('点击'); };
// 现代方式（支持多个事件）
btn.addEventListener('click', () => { console.log('点击'); });

  • 事件类型：
    | 事件 | 触发时机 | 示例 |
    |——|———-|——|
    | click | 点击元素时 | <button onclick="func()"> |
    | mouseover | 鼠标移入元素时 | btn.addEventListener('mouseover', func); |
    | submit | 表单提交时 | form.addEventListener('submit', validate); |

    html应用js 第1张

表单验证与交互

  • 阻止默认行为： 

    const form = document.getElementById('form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单提交
  if (validateForm()) {
    alert('验证通过');
  }
});

  • 实时验证示例： 

    const input = document.getElementById('username');
input.addEventListener('input', function() {
  if (this.value.length < 3) {
    this.style.borderColor = 'red';
  } else {
    this.style.borderColor = '';
  }
});

与特效

  • 创建与插入元素： 

    const newElem = document.createElement('div');
newElem.textContent = '新增元素';
document.body.appendChild(newElem); // 添加到末尾

  • 动画效果： 

    const box = document.getElementById('box');
box.style.transition = 'opacity 1s';
box.style.opacity = 0; // 渐隐效果
setTimeout(() => box.style.display = 'none', 1000);

AJAX与异步请求

  • 使用Fetch API： 

    fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 处理数据（如渲染到页面）
  })
  .catch(error => console.error('Error:', error));

  • 与传统AJAX对比：
    | 特性 | XMLHttpRequest | Fetch API |
    |——|—————-|———–|
    | 语法简洁性 | 冗长，需手动处理Promise | 基于Promise，链式调用 |
    | 兼容性 | 老旧浏览器支持 | 需Polyfill（如IE） |
    | 错误处理 | onreadystatechange | .catch()方法 |

JavaScript框架集成

  • React/Vue/Angular：通过虚拟DOM、组件化、数据绑定等机制优化开发。 
    // React示例：将JSX渲染到DOM
ReactDOM.render(<h1>Hello, World!</h1>, document.getElementById('root'));

相关问题与解答

问题1：如何在HTML页面中动态添加一个按钮并绑定点击事件？
解答：

  1. 创建按钮元素并设置属性： 
    const btn = document.createElement('button');
btn.textContent = '动态按钮';
  2. 绑定点击事件： 
    btn.addEventListener('click', () => {
  alert('按钮被点击！');
});
  3. 将按钮添加到页面： 
    document.body.appendChild(btn);

问题2：如何通过JavaScript实现表单的非同步提交（AJAX提交）？
解答：

  1. 阻止表单默认提交行为： 
    const form = document.getElementById('myForm');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面刷新
});
  2. 收集表单数据并发送请求： 
    const formData = new FormData(form); // 自动封装表单数据
fetch('/submit', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(data => {
  console.log('服务器响应:', data);
  form.reset(); // 清空表单
})
.catch(error => console.error('提交失败
HTML
0

相关文章