Skip to content

JavaScript

API

APIApplication Programming Interface 应用程序编程接口): " 计算机操作系统 "(Operating system)或 " 程序库 " 提供给应用程序调用使用的代码。

其主要目的是让应用程序开发人员得以调用一组例程功能,而无须考虑其底层的源代码为何、或理解其内部工作机制的细节。API 本身是抽象的,它仅定义了一个接口,而不涉及应用程序在实际实现过程中的具体操作。

Web API

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

BOM

浏览器对象模型(BOM)指的是由 Web 浏览器暴露的所有对象组成的表示模型。BOMDOM 不同,其既没有标准的实现,也没有严格的定义, 所以浏览器厂商可以自由地实现 BOM

作为显示文档的窗口, 浏览器程序将其视为对象的分层集合。当浏览器分析文档时, 它将创建一个对象的集合, 以定义文档, 并详细说明它应如何显示。

浏览器创建的对象称为文档对象。它是浏览器使用的更大的对象集合的一部分。此浏览器对象集合统称为浏览器对象模型BOM

BOM 层次结构的顶层是窗口对象, 它包含有关显示文档的窗口的信息。某些窗口对象本身就是描述文档和相关信息的对象。

BOM 的顶级对象 window 以及常用操作方法 window 是浏览器的顶级对象,当调用 window 下的属性和方法时,可以省略 window

对话框

  • alert():显示带有一段消息和一个确认按钮的警告框。
  • prompt():显示可提示用户输入的对话框。
  • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。

页面加载事件

js
// onload
window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}

// onunload
window.onunload = function () {
  // 当用户退出页面时执行
}

浏览器尺寸

js
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

上述代码可以获取所有浏览器的宽高((不包括工具栏/滚动条))。

定时器

setTimeout() 方法在指定的毫秒数到达之后执行指定的函数,只执行一次。clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout

js
// 创建一个定时器,2000毫秒后执行,返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello shiyanlou');
}, 2000);

// 取消定时器的执行
clearTimeout(timerId);

setInterval() 方法设置定时调用的函数也就是可以按照给定的时间(单位毫秒)周期调用函数,clearInterval() 方法取消由setInterval() 方法设置的 timeout

js
// 创建一个定时器,每隔2秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 2000);

// 取消定时器的执行
clearInterval(timerId);

DOM

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

DOM 定义了访问 HTMLXML 文档的标准。我们这里主要学习 HTML DOMDOM 可以把 HTML 看做是文档树,通过 DOM 提供的 API 可以对树上的节点进行操作。

DOM HTML

DOM 能够操作 HTML 的内容。改变 HTML 输出流。在 JavaScript 中,使用 document.write() 可用于直接向 HTML 输出流写内容。比如:

js
document.write('新设置的内容<p>标签也可以生成</p>');

改变 HTML 内容

使用 innerHTML 属性改变 HTML 内容。比如修改 p 标签中的内容:

js
<!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;

js
// 示例
<!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;

js
// 示例
<!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 节点操作

根据 W3CHTML DOM 标准,HTML 文档中的所有内容都是节点:整个文档就是一个文档节点。而每一个 HMTL 标签都是一个元素节点。HTML 标签中的文本则是文本节点。HTML 标签的属性是属性节点。一切都是节点。

获取节点

要操作节点,首先我们要找到节点。主要有以下三种办法:

  • 通过 ID 找到 HTML 元素

使用方法 getElementById() 通过元素的 ID 而选取元素,比如:

js
// 假定已经有一个 ID 名为 demo 的标签,可以这样来获取它
document.getElementById("demo");
  • 通过标签名找到 HTML 元素

使用方法 getElementsByTagName() 来选取元素,如果有多个同类型标签,那么我们可以通过下标来确认,比如:

js
<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() 通过元素的类名来选取元素。比如:

js
// 返回包含 class="name" 的所有元素的一个列表。
document.getElementsByClassName("name");

DOM 节点直接的关系

DOM 的节点并不是孤立的,我们从 dom 树中也可以看出,节点与节点之间存在着相对的关系,就如同一个家族一样,有父辈,有兄弟,有儿子等等。下面我们来看一下都有哪些节点:

父节点 兄弟节点 子节点 所有子节点

js
parentNode
nextSibling
firstChild
childNodes
nextElementSibling
firstElementChild
children
previousSibling
lastChild
previousElementSibling
lastElementChild

示例

html
<html>
  <head>
    <title>DOM 节点演示</title>
  </head>
  <body>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
  </body>
</html>

上面的例子中:

html
<html>节点没有父节点,它是根节点。
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "我是p标签"的父节点是 <p> 节点
<html>节点有两个子节点: <head> 和 <body>
<h1>节点和<p>节点是兄弟节点,同时也是<body>的子节点

需要注意以下几点

  • childNodes:它是标准属性,它返回指定元素的子元素集合,包括 HTML 节点,所有属性,文本节点
  • children:非标准属性,它返回指定元素的子元素集合。但它只返回 HTML 节点,甚至不返回文本节点。
  • nextSiblingpreviousSibling 获取的是节点,获取元素对应的属性是 nextElementSiblingpreviousElementSibling
  • nextElementSiblingpreviousElementSibling 有兼容性问题,IE9 以后才支持。

创建节点

创建元素节点:使用 createElement() 方法。比如:

js
var par = document.createElement("p");
  • 创建属性节点:使用 createAttribute() 方法。

  • 创建文本节点:使用 createTextNode() 方法。

插入子节点

  • appendChild() 方法向节点添加最后一个子节点。
  • insertBefore (插入的新的子节点,指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null,则默认插入到后面。

删除节点

使用 removeChild() 方法。写法为:

父节点.removeChild(子节点);
node.parentNode.removeChild(node); //如果不知道父节点是什么,可以这样写

替换子节点

使用 replaceChild() 方法。语法为:

js
node.replaceChild(newnode,oldnode);

设置节点的属性:

获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)

DOM 事件

事件三要素

事件由:事件源 + 事件类型 + 事件处理程序组成

  • 事件源:触发事件的元素。
  • 事件类型:事件的触发方式(比如鼠标点击或键盘点击)。
  • 事件处理程序:事件触发后要执行的代码(函数形式,匿名函数)。

常用的事件

事件名说明
onclick鼠标单击
ondblclick鼠标双击
onkeyup按下并释放键盘上的一个键时触发
onchange文本内容或下拉菜单中的选项发生改变
onfocus获得焦点,表示文本框等获得鼠标光标。
onblur失去焦点,表示文本框等失去鼠标光标。
onmouseover鼠标悬停,即鼠标停留在图片等的上方
onmouseout鼠标移出,即离开图片等所在的区域
onload网页文档加载事件
onunload关闭网页时
onsubmit表单提交事件
onreset重置表单时

例子:鼠标单击事件

js
<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>

例子:鼠标移除悬停:

js
<!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>