Web API
API
- API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数
- API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
Web API
-
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )，即操作网页的一系列工具
-
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
API 和 Web API 总结
-
API 是为程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
-
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
-
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
DOM
文档对象模型（Document Object Model，简称DOM），W3C组织推荐的处理html文档的标准编程接口
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式
- 对象：
- 文档：一个页面就是一个文档，DOM中使用document表示
- 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
- 元素：网页中的所有标签，使用element表示
- DOM 把以上内容都看做是对象
获取元素
根据ID获取
-
语法：document.getElementById(id)
-
作用：根据ID获取元素对象
-
参数：id值，区分大小写的字符串
-
返回值：元素对象 或 null
-
案例代码
<body>
<div id="time">2019-9-9</div>
<script>
// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
var timer = document.getElementById('time');
console.log(timer);
</script>
</body>
根据标签名获取元素
- 语法：document.getElementsByTagName(‘标签名’)
element.getElementsByTagName(‘标签名’)
-
作用：根据标签名获取元素对象
-
参数：标签名
-
返回值：元素对象集合（伪数组，数组元素是元素对象）
-
案例代码
<body>
<ul>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久22</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回 获取元素对象的集合 以伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis); //元素对象集合: HTMLCollection HTML标签集合---- 伪数组
console.log(lis[0]);
// 2. 依次打印里面的元素对象 采取遍历方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 得到该元素里某些标签
var nav = document.getElementById('nav'); // 这个获得nav 元素
var navLis = nav.getElementsByTagName
最低0.47元/天 解锁文章
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
