7、JavaScript Web API、BOM、DOM

阿慕路泽

已于 2024-03-19 13:59:25 修改

阅读量236

点赞数

分类专栏： HTML+CSS+JS 文章标签：前端 javascript 开发语言

于 2019-03-29 19:34:40 首次发布

本文链接：https://blog.csdn.net/sinat_33924041/article/details/88784358

版权

HTML+CSS+JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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