Web API介绍
API的概念：
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- 任何开发语言都有自己的API
Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
DOM经常进行的操作
- 获取元素
- 对元素进行操作(设置其属性或调用其方法)
- 动态创建元素
- 事件(什么时机做相应的操作)
所以我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作
获取页面元素
<body>
<div class="box1"></div>
<div id="box2"></div>
<div class="box"></div>
<div class="box"></div>
<div name=""></div>
<input type="text" name="hobby">
</body>
- getElementById()·····································根据 id 获取元素
<script>
var box1 = document.getElementsByClassName('box1')
box1.onclick = function(){
//注册点击事件
}
</script>
- getElementByTagName()···························根据标签获取元素
<script>
//所有的div标签都会执行
var divs = document.getElementByTagName('div')
divs.onclick = function(){
//注册点击事件
}
</script>
- getElementByName()································根据name获取元素
<script>
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
</script>
- getElementByClassName()························根据类名获取元素
var box1 = document.getElementsByClassName('box1')
box1.onclick = function(){
//注册点击事件
}
- querySelect() ,querySelectorAll()·················根据选择器获取元素
var box2 = document.querySelector('#box2')
var box1 = document.querySelector('.box1')
var boxs = document.querySelectorAll('.box')
扫一扫
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
