网站首页 > 技术文章 正文
一、Web API 概述
API(Application Programming Interface,应用程序编程接口)是一些预先定义的属性或方法,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
Web API:浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM),此处的Web API特指浏览器提供的一组方法。如下是MDN中的列举的Web API:MDN文档
二、JavaScript组成
ECMAScript
ECMAScript 定义了JavaScript 的语法规范,是JavaScript的核心。它描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准,它与具体实现无关。
BOM
BOM(Browser Object Model)其实是一套操作浏览器功能的API,通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等 。
DOM
DOM(Document Object Model)其实是一套操作页面元素的API,JavaScript中的DOM把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作。
三、DOM的概念
文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理 可扩展标记语言(html或xml文档) 的标准 编程接口。它是一种与平台和语言无关的 API,它可以动态操作HTML文档,如 对html标签作增删改查操作。DOM 是一种基于树的 API 文档,在处理html文档的过程中,DOM以对象的形式存储在内存中。
因为DOM是基于树结构存储在内存中的,所以DOM又称为文档树模型,DOM的树结构如下图
DOM中的几个常用概念
1、文档:一个网页可以称为文档
2、节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
3、元素:网页中的标签
4、属性:标签的属性
DOM经常进行的操作
1、获取元素
2、对元素进行操作(设置其属性或调用其方法)
3、动态创建元素
4、事件(什么时机做相应的操作)
四、获取元素几种的方式(掌握)
语法:
document.getElementById('id') //通过ID获取元素,唯一一个
document.getElementsByTagName('标签名') //通过标签名称获取元素,[]集合
document.getElementsByClassName('类名') //通过类名获取元素,[]集合。兼容性问题
document.getElementsByName("name") //通过name属性值获取元素(表单)
// HTML5向Web API新引入了两个方法用来更方便地从DOM选取元素
// 功能类似于jQuery的选择器。
document.querySelector('selectors') //获取一组元素中第一个满足条件的元素,高版本浏览器支持
document.querySelectorAll('selectors') //获取所有满足条件的元素
// 这个参数selectors需要是合法的CSS选择语法,可以包含多个CSS选择器,用逗号隔开
猜你喜欢
- 2024-09-21 15 张精美动图全面讲解 CORS(400种动图)
- 2024-09-21 前端搞工程化:从零打造性能检测库
- 2024-09-21 Matroska解封装原理与实践(解除封装)
- 2024-09-21 没想到一个 source map 居然涉及到那么多知识盲区
- 2024-09-21 MDN Web文档项目引入生成式AI后遭到开发者广泛差评
- 1514℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 569℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 510℃MySQL service启动脚本浅析(r12笔记第59天)
- 486℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 485℃启用MySQL查询缓存(mysql8.0查询缓存)
- 467℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 446℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 444℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- c语言min函数头文件 (68)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)