JavaScript
API
API
(Application
Programming
Interface
应用程序编程接口): " 计算机操作系统 "(Operating
system
)或 " 程序库 " 提供给应用程序调用使用的代码。
其主要目的是让应用程序开发人员得以调用一组例程功能,而无须考虑其底层的源代码为何、或理解其内部工作机制的细节。API
本身是抽象的,它仅定义了一个接口,而不涉及应用程序在实际实现过程中的具体操作。
Web
API
Web
API
是浏览器提供的一套操作浏览器功能和页面元素的 API
(BOM
和 DOM
)。
BOM
浏览器对象模型(BOM
)指的是由 Web
浏览器暴露的所有对象组成的表示模型。BOM
与 DOM
不同,其既没有标准的实现,也没有严格的定义, 所以浏览器厂商可以自由地实现 BOM
。
作为显示文档的窗口, 浏览器程序将其视为对象的分层集合。当浏览器分析文档时, 它将创建一个对象的集合, 以定义文档, 并详细说明它应如何显示。
浏览器创建的对象称为文档对象。它是浏览器使用的更大的对象集合的一部分。此浏览器对象集合统称为浏览器对象模型或 BOM
。
BOM
层次结构的顶层是窗口对象, 它包含有关显示文档的窗口的信息。某些窗口对象本身就是描述文档和相关信息的对象。
BOM
的顶级对象 window
以及常用操作方法 window
是浏览器的顶级对象,当调用 window
下的属性和方法时,可以省略 window
。
对话框
alert()
:显示带有一段消息和一个确认按钮的警告框。prompt()
:显示可提示用户输入的对话框。confirm()
:显示带有一段消息以及确认按钮和取消按钮的对话框。
页面加载事件
// onload
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}
// onunload
window.onunload = function () {
// 当用户退出页面时执行
}
浏览器尺寸
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
上述代码可以获取所有浏览器的宽高((不包括工具栏/滚动条))。
定时器
setTimeout()
方法在指定的毫秒数到达之后执行指定的函数,只执行一次。clearTimeout()
方法取消由 setTimeout()
方法设置的 timeout
。
// 创建一个定时器,2000毫秒后执行,返回定时器的标示
var timerId = setTimeout(function () {
console.log('Hello shiyanlou');
}, 2000);
// 取消定时器的执行
clearTimeout(timerId);
setInterval()
方法设置定时调用的函数也就是可以按照给定的时间(单位毫秒)周期调用函数,clearInterval()
方法取消由setInterval()
方法设置的 timeout
。
// 创建一个定时器,每隔2秒调用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 2000);
// 取消定时器的执行
clearInterval(timerId);
DOM
文档对象模型(Document
Object
Model
,简称 DOM
),是 W3C
组织推荐的处理可扩展标志语言的标准编程接口。
DOM
定义了访问 HTML
和 XML
文档的标准。我们这里主要学习 HTML
DOM
。DOM
可以把 HTML
看做是文档树,通过 DOM
提供的 API
可以对树上的节点进行操作。
DOM
HTML
DOM
能够操作 HTML
的内容。改变 HTML
输出流。在 JavaScript
中,使用 document.write()
可用于直接向 HTML
输出流写内容。比如:
document.write('新设置的内容<p>标签也可以生成</p>');
改变 HTML
内容
使用 innerHTML
属性改变 HTML
内容。比如修改 p
标签中的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "Hello 实验楼";
</script>
</body>
</html>
改变 HTML
属性
语法:document.getElementById(id).attribute = new value;
// 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="image" src="https://www.baidu.com/img/bd_logo1.png">
<script>
document.getElementById("image").src = "https://static.shiyanlou.com/img/shiyanlou_logo.svg";
</script>
</body>
</html>
DOM
CSS
DOM
能够改变 HTML
元素的样式。语法为:document.getElementById(id).style.property=new style;
// 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="syl" style="color: red;">实验楼</p>
<script>
document.getElementById("syl").style.color = "green";
</script>
</body>
</html>
DOM
节点操作
根据 W3C
的 HTML
DOM
标准,HTML
文档中的所有内容都是节点:整个文档就是一个文档节点。而每一个 HMTL
标签都是一个元素节点。HTML
标签中的文本则是文本节点。HTML
标签的属性是属性节点。一切都是节点。
获取节点
要操作节点,首先我们要找到节点。主要有以下三种办法:
- 通过
ID
找到HTML
元素
使用方法 getElementById()
通过元素的 ID 而选取元素,比如:
// 假定已经有一个 ID 名为 demo 的标签,可以这样来获取它
document.getElementById("demo");
- 通过标签名找到
HTML
元素
使用方法 getElementsByTagName()
来选取元素,如果有多个同类型标签,那么我们可以通过下标来确认,比如:
<html>
<body>
<input type="text" />
<input type="text" />
<script>
document.getElementsByTagName("input")[0].value="hello"; // 下标为 [0] 表示选取第 1 个 input 标签
document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签
</script>
</body>
</html>
- 通过类名来找到 HTML 元素
使用方法 getElementsByClassName()
通过元素的类名来选取元素。比如:
// 返回包含 class="name" 的所有元素的一个列表。
document.getElementsByClassName("name");
DOM 节点直接的关系
DOM
的节点并不是孤立的,我们从 dom
树中也可以看出,节点与节点之间存在着相对的关系,就如同一个家族一样,有父辈,有兄弟,有儿子等等。下面我们来看一下都有哪些节点:
父节点 兄弟节点 子节点 所有子节点
parentNode
nextSibling
firstChild
childNodes
nextElementSibling
firstElementChild
children
previousSibling
lastChild
previousElementSibling
lastElementChild
示例:
<html>
<head>
<title>DOM 节点演示</title>
</head>
<body>
<h1>我是h1标签</h1>
<p>我是p标签</p>
</body>
</html>
上面的例子中:
<html>节点没有父节点,它是根节点。
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "我是p标签"的父节点是 <p> 节点
<html>节点有两个子节点: <head> 和 <body>
<h1>节点和<p>节点是兄弟节点,同时也是<body>的子节点
需要注意以下几点:
childNodes
:它是标准属性,它返回指定元素的子元素集合,包括HTML
节点,所有属性,文本节点children
:非标准属性,它返回指定元素的子元素集合。但它只返回HTML
节点,甚至不返回文本节点。nextSibling
和previousSibling
获取的是节点,获取元素对应的属性是nextElementSibling
和previousElementSibling
。nextElementSibling
和previousElementSibling
有兼容性问题,IE9 以后才支持。
创建节点
创建元素节点:使用 createElement()
方法。比如:
var par = document.createElement("p");
创建属性节点:使用
createAttribute()
方法。创建文本节点:使用
createTextNode()
方法。
插入子节点
appendChild()
方法向节点添加最后一个子节点。insertBefore
(插入的新的子节点,指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null,则默认插入到后面。
删除节点
使用 removeChild()
方法。写法为:
父节点.removeChild(子节点);
node.parentNode.removeChild(node); //如果不知道父节点是什么,可以这样写
替换子节点
使用 replaceChild()
方法。语法为:
node.replaceChild(newnode,oldnode);
设置节点的属性:
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
DOM 事件
事件三要素
事件由:事件源 + 事件类型 + 事件处理程序组成。
- 事件源:触发事件的元素。
- 事件类型:事件的触发方式(比如鼠标点击或键盘点击)。
- 事件处理程序:事件触发后要执行的代码(函数形式,匿名函数)。
常用的事件
事件名 | 说明 |
---|---|
onclick | 鼠标单击 |
ondblclick | 鼠标双击 |
onkeyup | 按下并释放键盘上的一个键时触发 |
onchange | 文本内容或下拉菜单中的选项发生改变 |
onfocus | 获得焦点,表示文本框等获得鼠标光标。 |
onblur | 失去焦点,表示文本框等失去鼠标光标。 |
onmouseover | 鼠标悬停,即鼠标停留在图片等的上方 |
onmouseout | 鼠标移出,即离开图片等所在的区域 |
onload | 网页文档加载事件 |
onunload | 关闭网页时 |
onsubmit | 表单提交事件 |
onreset | 重置表单时 |
例子:鼠标单击事件
<p onclick="this.innerHTML='我爱学习,身体好好!'">请点击该文本</p>
例子:鼠标双击事件
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 ondblclick="changetext(this)">请点击该文本</h1>
<script>
function changetext(id) {
id.innerHTML = "我爱学习,身体棒棒!"
}
</script>
</body>
例子:鼠标移除悬停:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:deepskyblue;width:200px;height:100px;">把鼠标移到上面</div>
<script>
function mOver(obj) {
obj.innerHTML = "把鼠标移开 ";
}
function mOut(obj) {
obj.innerHTML = "把鼠标移到上面";
}
</script>
</body>
</html>