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

html都提供了哪些api

HTML提供DOM操作、事件处理、本地存储、媒体控制及表单验证等核心

HTML提供的API分类与详细说明

BOM（浏览器对象模型）相关API

API名称 功能描述 示例代码
window 全局对象，代表浏览器窗口，提供对全局变量、定时器、弹窗等操作。 window.alert('提示')
setTimeout(() => console.log('延时执行'), 1000)
navigator 获取浏览器和操作系统信息（如用户代理、语言、在线状态等）。 navigator.userAgent
navigator.onLine
screen 获取屏幕分辨率、像素比等信息。 screen.width
screen.pixelDepth
location 操作或获取当前URL的地址信息（如协议、主机、路径、参数等）。 location.href
location.search
location.reload()
history 操作浏览器历史记录（前进、后退、替换当前记录）。 history.back()
history.pushState({}, '标题', '/new-url')

DOM（文档对象模型）操作API

API名称 功能描述 示例代码
document.querySelector 通过CSS选择器查询单个元素。 document.querySelector('.class-name')
document.getElementById 通过ID获取元素。 document.getElementById('element-id')
document.createElement 动态创建HTML元素。 const div = document.createElement('div')
element.innerHTML 获取或设置元素的HTML内容。 element.innerHTML = '<p>新内容</p>'
element.style 直接操作元素的样式（如修改颜色、显示隐藏等）。 element.style.color = 'red'
element.style.display = 'none'
element.classList 操作元素的类名（添加、删除、切换）。 element.classList.add('active')
element.classList.toggle('hidden')
element.dataset 访问或操作元素的自定义数据属性（如data-）。 element.dataset.userId = '123'
element.dataset.role

事件处理API

API名称 功能描述 示例代码
addEventListener 为元素绑定事件监听器（支持冒泡、捕获阶段）。 element.addEventListener('click', handler)
removeEventListener 移除已绑定的事件监听器。 element.removeEventListener('click', handler)
event对象 事件触发时传递的对象，包含事件类型、目标元素、坐标等。 (e) => { console.log(e.target, e.clientX, e.keyCode }
event.preventDefault 阻止默认行为（如表单提交、链接跳转）。 e.preventDefault()
event.stopPropagation 阻止事件冒泡到父元素。 e.stopPropagation()

表单与输入相关API

API名称 功能描述 示例代码
form.checkValidity 检查表单是否通过内置验证规则。 form.checkValidity()
input.value 获取或设置输入框的值。 input.value = '新值'
input.select()（选中文本）
input.type 动态修改输入框类型（如切换为密码或文本）。 passwordInput.type = 'text'
FileList 获取文件输入框中的文件列表（如上传文件）。 input.files[0].name
input.files[0].size
select.selectedIndex 获取或设置下拉框的选中项索引。 select.selectedIndex = 2

存储与状态管理API

API名称 功能描述 示例代码
localStorage 持久化存储数据（关闭浏览器后仍存在）。 localStorage.setItem('key', 'value')
localStorage.getItem('key')
sessionStorage 会话级存储（页面关闭后清除）。 sessionStorage.clear()
cookie 通过Cookie存储数据（需设置过期时间）。 document.cookie = 'name=John; max-age=3600'

其他实用API

API名称 功能描述 示例代码
fetch 发起网络请求（支持Promise）。 fetch('/api/data').then(res => res.json())
XMLHttpRequest 传统方式发起AJAX请求。 const xhr = new XMLHttpRequest(); xhr.open('GET', '/api')
requestAnimationFrame 高效执行动画帧（替代setTimeout）。 requestAnimationFrame(draw)
IntersectionObserver 监听元素是否进入可视区域（懒加载）。 const observer = new IntersectionObserver(entries => {})

相关问题与解答

问题1：HTML5新增了哪些与本地存储相关的API？

解答：
HTML5引入了localStorage和sessionStorage，分别用于持久化存储和会话级存储，两者均提供以下方法：

html都提供了哪些api 第1张

  • setItem(key, value)：存储键值对。
  • getItem(key)：获取键对应的值。
  • removeItem(key)：删除指定键。
  • clear()：清空所有存储。
    indexedDB也是HTML5提供的更强大的客户端存储方案,适用于复杂数据存储。

问题2：如何检测浏览器是否支持某个HTML5 API？

解答：
可以通过以下方式检测：

  1. 检查对象是否存在：例如检测fetch是否可用： 
    if ('fetch' in window) {
  // 支持fetch
}
  2. 检查方法是否为函数：例如检测Array.prototype.includes： 
    if (typeof Array.prototype.includes === 'function') {
  // 支持includes方法
}
  3. 使用try-catch捕获错误：尝试调用API并捕获异常。 
    try {
  localStorage.setItem('test', '1');
  localStorage.removeItem('test');
} catch(e) {
  // 不支持localStorage
}
AJA事件处理API
0

相关文章