3-Day3
Web API介绍
API的概念
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- API的使用方法(console.log(‘adf’))
Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM
DOM的概念
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构,DOM(是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。
DOM又称为文档树模型
- 文档:一个网页可以称为文档
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
- 元素:网页中的标签
- 属性:标签的属性
DOM经常进行的操作
- 获取元素
- 对元素进行操作(设置其属性或调用其方法)
- 动态创建元素
- 事件(什么时机做相应的操作)
获取页面元素
为什么要获取页面元素
例如:我们要页面元素隐藏/显示,需要现获取对应的元素,才能进行后续操作
根据id获取元素
var div = document.getElementById("id2");
当id重名的时候,会获取第一个,id有唯一性的
根据标签名获取元素
//标签名获取元素
var div = document.getElementsByTagName("div")[5];
alert(div);
根据name获取元素
// 通过name来获取
var names = document.getElementsByName('n');
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}
alert(names);
根据类名获取元素
// 通过类名
var mains = document.getElementsByClassName("main");
alert(mains);
根据选择器获取元素
// 根据选择器获取元素
var id1 = document.querySelector('#id1');
alert(id1);
var mains = document.querySelectorAll('.main');
alert(mains);
事件
事件:触发-响应机制
事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序(回调函数):事件触发后要执行的代码(函数形式)
属性操作
非表单元素的属性
href、title、id、src、className
var link = document.getElementById("link");
console.log(link.href);
案例:
-
点击按钮显示隐藏div
-
innerHTML和innerText
-
HTML转义符
" "
' '
& &
< < // less than 小于
> > // greater than 大于
空格
© ©
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
自定义属性操作
- getAttribute() 获取标签行内属性
- setAttribute() 设置标签行内属性
- removeAttribute() 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性。
样式(css)操作
样式显示在标签行内
var div1 = document.getElementById('div1');
div1.style.width = '100px';
属性值是字符串,必须加上单位
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字,定义变量,属性不能用关键字
创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
节点操作
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div, firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);
事件详解
注册/移除事件的三种方式
var box = document.getElementById('box');
box.onclick = function () {
console.log('点击后执行');
};
box.onclick = null;
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
console.log('点击后执行');
}
事件的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
参数为false是冒泡 为true是捕获
事件对象的属性和方法
- event.type 获取事件类型
- clientX/clientY 所有浏览器都支持,窗口位置
- pageX/pageY IE8以前不支持,页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
阻止事件传播的方式
- 标准方式 event.stopPropagation();
- IE低版本 event.cancelBubble = true; 标准中已废弃
常用的鼠标和键盘事件
- onmouseup 鼠标按键放开时触发
- onmousedown 鼠标按键按下触发
- onmousemove 鼠标移动触发
- onkeyup 键盘按键按下触发
- onkeydown 键盘按键抬起触发