1. 什么是Web API和DOM
-
Web API
-
API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能(可以理解成封装好了的函数)
Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM) -
DOM
- 文档对象模型(Document Object Model),对html文档页面进行编程控制的系列API接口
- 通过文档对象模型(DOM)可以对 HTML 元素进行添加、移动、改变或移除的方法和属性
2. DOM树
学习Web API 需要从以下几个方面去考虑:
1.API的作用是什么?
2.API的参数是什么?
3.API的返回值是什么?
文档:一个页面就是一个文档,DOM中使用ducument表示
元素:页面中所有标签都是元素,DOM中使用element
节点:网页中所有的内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
注意:DOM把以上所有内容都看作对象。其中顶级对象是document。
3. 事件
事件三要素: //例子 鼠标点击DIV 弹出警示框
1.触发源:什么触发了事件 // 触发源:DIV
2.触发事件:如何触发 //触发事件:鼠标点击
3.事件处理程序:触发后做什么 //事件处理程序:弹出警示框
4. 获得触发源
获取触发源的两种方式:
1.通过获取元素的方法(页面中所有标签都是元素,DOM中使用element)
2.通过获取节点的方式(网页中所有的内容都是节点(标签、属性、文本、注释等),DOM中使用node表示)
获取元素的五种方法:
1.通过ID名获取
document.getElementById('ID名称')
2.通过标签名获取
document.getElementsByTagName('标签名')
3.通过类名获取(此方法为HTML5新增方法)
document.getElementsByClassName('div')
4.通过querySelector选择器获取
document.quertSelector('选择器') //仅获取第一个元素对象
document.quertSelectorAll('选择器')
5.获取特殊元素
document.body //获取body元素
document.documentElement //获取HTML元素
- 以上五种获取元素的方式命名规则均为驼峰命名法,即首字母要大写。
- document.getElementsByTagName(‘标签名’) 、document.getElementsByClassName(‘div’)、document.quertSelectorAll(‘选择器’) 返回值均以伪数组的方式储存。
获取节点:
1.父节点
sonNode.parentNode
2.子节点
parentNode.childNodes //标准,返回值包含了所有节点,包括元素节点、文本节点等
parentNode.children //非标准,但返回值只包含元素节点
3.兄弟节点(使用较少)
node.previousSibling //上一个节点
node.nextSibling //下一个节点
5. 触发事件
常见DOM触发事件一般分为两种:1.鼠标事件 2.键盘事件
1.鼠标事件
onclick //鼠标点击左键触发
onmouseover //鼠标经过触发
onmouseout //鼠标离开触发
onfocus //获得鼠标焦点触发
onblur //失去鼠标焦点触发
onmousemove //鼠标移动触发
onmouseup //鼠标弹起触发
onmousedown //鼠标按下触发
oncontextmenu //阻止鼠标右键菜单(配合阻止默认行为)
onselectstart //禁止鼠标选取内容(配合阻止默认行为)
onselect //禁止复制(配合阻止默认行为)
注意: 1.onblur、onfocus、onmouseenter、onmouseleave事件是非冒泡事件
2.键盘事件
keyup //某个键盘按键松开触发
keydown //某个键盘按键按下时触发,只要不松开会一直触发
keypress //某个键盘按键按下时触发,不识别功能键(ctrl,上下箭头等),只要不松开会一直触发
注意:1.如果三者同时执行,先执行keydown,再执行keypress,最后执行keyup
2.三者通过ASCALL对按键进行识别,但是keyup和keydown不识别英文大小写
6. 处理程序的两种方式
注册处理程序分为传统方式和监听方式两种
//1.传统方式
var div = document.quertSelector('div'); //获取触发源
div.onclick = function() {
//处理程序
}
//2.监听方式
var div = document.quertSelector('div'); //获取触发源
/*格式:
* div.addEvenListener(type, listener[, useCapture])
* 参数:
* 1.type:事件类型字符串,比如 click、mouseover,注意不要带on
* 2.listener:事件处理函数,事件发生时,会调用该监听函数
* 3.useCapture:可选参数,是一个布尔值,默认为false
*/
div.addEvenListener('click',function () {
//处理程序
},false)
两者区别:
1.传统注册方法需要带on,监听方法不需要带on
2.传统注册方式只能给一个触发源绑定一个事件,当绑定多个事件时,后面的事件会覆盖前面的事件
3.监听方法只支持IE9以上版本,且同一个触发源可以绑定多个事件,且按照绑定顺序执行。
4.传统方法和监听方法均可以传递参数,且监听方法可以外部调用,调用时不需要加括号(注意)
7. 处理程序
针对于元素的操作,主要有创建、增、删、改、查、属性操作、事件操作。
1.创建
1. document.write
2. innerHTML
3. creatElement
2.增
1. parenNode.appendChild(ChildNode) //插入父元素的最后一位
2. parenNode.insertBefore(ChildNode,指定元素) //插入到指定元素的前面
3.删
1. removeChild(ChildNode)
4.改
1. 修改元素内容
element.innerText //从起始位置到终止位置的内容,但不识别标签,同时会去掉空格和换行
element.innerHTML //从起始位置到终止位置的内容,识别标签,保留空格和换行
2. 修改自身属性
element.属性名 // a.href img.scr等
3. 修改样式属性
element.style.属性名 //div.style.backgroundColor
4. 修改表单元素
对于表单标签,innerHTML和innerText 是无效的,修改方式类似修改自身属性
注意:1.修改样式属性命名规则为驼峰命名法;
2. 修改style样式操作后,产生的是行内样式,权重:行内>镶嵌>外部调用
3.实际开发中更多使用element.innerHTML
5.查
1. DOM提供的API方法: getElementByld getElementsByTagName 古老用法不太推荐
2. H5提供的新方法: querySelector. querySelectorAll 提倡
3. 节点操作获取元素: parentNode、 children 、previousElementSibling、nextElementSibling 提倡