Web API

原创
2019/05/16 14:47
阅读数 51

API

Application Programming Interface应用程序编程接口

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOMDOM)

BOM浏览器对象模型,是由 Web 浏览器暴露的所有对象组成的表示模型


BOM的顶级对象window

对话框

alert():警告框 alert('密码错误')

prompt():输入框 var name = prompt('请输性名?')

confirm():确认框 var flag = confirm('确认提交?')

页面加载事件

window.onload = function () {
  // 当页面完全加载完所有内容(包括图像、脚本文件、CSS 文件等)后才会执行
}
window.onunload = function () {
  // 当用户退出页面时执行
}

定时器

//只执行一次
var timerId = setTimeout(() => {
    console.log('hello world')
}, 2000) //两秒后执行
clearTimeout(timerId) //取消定时器
//循环/间歇执行
var timerId = setInterval(() => {
    console.log('hello world')
}, 2000) //每隔两秒执行一次
clearInterval(timerId) //取消定时器

DOM

文档对象模型 Document Object Model,是W3C组织推荐的处理可扩展标志语言的标准编程接口

直接向页面写内容: document.write('hello world')

改变元素内容: document.getElementById('root').innerHTML = '<h1>hello</h1>' innerHTMLHTML元素的一个属性

DOM CSS: document.getElementById('root').style.color = 'green'


DOM节点

文档节点Document:指整个文档window.document

元素节点Element:指HTML元素,如<head><body>

属性节点Attribute:指HTML元素的属性,如class="row"

文本节点Text:指HTML文档中出现的文本,包括空格和换行

文档类型节点DocumentType:指文档类型节点<!DOCTYPE html>

文档碎片节点DocumentFragment:指文档片段


DOM节点操作

增:document.createElement("p"); appendChild()

删:node.parentNode.removeChild(node)

改:node.replaceChild(newnode,oldnode)

查:document.getElementById("demo")、querySelectorAll()

属性操作

增/改:setAttribute(name, value);删:removeAttribute(name);查:getAttribute(name)


DOM事件

事件:事件源 + 事件类型 + 事件处理程序

常用事件:onclickonchangeonkeydownonfocusonbluronmouseoveronmouseout


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部