web api 网页应用编程（DOM BOM）
时间：2023-09-28 02:30:01 | 来源：网站运营
时间：2023-09-28 02:30:01 来源：网站运营
web api 网页应用编程（DOM BOM）：
DOM
web api的概念
浏览器提供了一套操作浏览器功能和页面元素的api（bom和dom）
此处的web api 特指浏览器提供的api（一组方法），web api在后面的课程中有其他含义
学习目标：掌握常见浏览器提供的api的调用方式
ECMAscript-js的核心
定义了js的语法规范
js的核心，描述了语言的基本语法和数据类型，ECMAscript是一套标准，定义了一种语言的标准与具体实现无关
BOM - 浏览器对象模型
browser object model，一套操作浏览器功能的 API。
通过 BOM 可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 。
DOM - 文档对象模型
document object model，一套操作页面元素的 API。
DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。
DOM 的概念
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标
记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地
访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过
说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一
种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。
DOM 经常进行的操作
获取元素
对元素进行操作(设置其属性或调用其方法)
动态创建元素
事件(什么时机做相应的操作)
根据id获取元素
方法，调用document 对象的getElementById方法
参数：字符串类型的id的属性值
返回值：对应id名的元素对象
注意1：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用
注意2：代码执行顺序，如果js在html结构之前，会导致结构未加载，不能获取对应id的元素
根据标签名获取元素
方法：调用 document 对象的 getElementsByTagName 方法。
参数：字符串类型的标签名。
返回值：同名的元素对象组成的数组。
注意1：操作数据时需要按照操作数组的方法进行。
注意2：getElementsByTagName 方法内部获取的元素是动态增加的。
元素对象内部获取标签元素
获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div 元素对象也可以调用 getElementsByTagName 方法。
目的：缩小选择元素的范围，类似 css 中的后代选择器。
根据 name 获取元素
• 方法：调用 document 对象的 getElementsByName 方法。
• 参数：字符串类型的 name 属性值。
• 返回值：name 属性值相同的元素对象组成的数组。
• 不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。
根据类名获取元素
• 方法：调用 document 对象的 getElementsByClassName 方法。
• 参数：字符串类型的 class 属性值。
• 返回值：class 属性值相同的元素对象组成的数组。
• 浏览器兼容问题：不支持 IE8 及以下的浏览器
根据选择器获取元素
• 方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个
符合条件的标签元素。
• 方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所
有符合条件的标签元素。
• 参数：字符串类型的 css 中的选择器。
• 浏览器兼容问题：不支持 IE8 以下的浏览器
事件
• 事件：在什么时候做什么事
• 执行机制：触发--响应机制
• 绑定事件(注册事件)三要素：
1、事件源：给谁绑定事件
2、事件类型：绑定什么类型的事件 click 单击
3、事件函数：事件发生后执行什么内容，写在函数内部
常用事件监听方法：
• 方法1：绑定 HTML 元素属性。
• 方法2：绑定 DOM 对象属性。
常用的鼠标事件类型：
非表单元素的属性
• 例如：href、title、id、src 等。
• 调用方式：元素对象打点调用属性名，例如 obj.href。
• 注意：部分的属性名跟关键字和保留字冲突，会更换写法。
class → className
for → htmlFor
rowspan → rowSpan
• 属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式。
应用1：图片案例切换
应用2：元素的显示隐藏
获取标签内部内容的属性
• 获取标签内部内容的属性有两个：innerHTML 和 innerText
• innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的
内容包括空白换行等。
• innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的
内容会去掉换行和缩进等空白。
更改标签内容：
还可以通过两个属性给双标签内部去更改内容：
• innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载。
• innerText 设置属性值，有标签的字符串，会按照普通的字符加载。
对比使用场景
• innerText：在设置纯字符串时使用。
• innerHTML：在设置有内部子标签结构时使用。
表单元素属性
• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性
• 注意：在 DOM 中元素对象的属性值只有一个时，会被转成布尔值显示。
例如：txt.disabled = true;
应用：表单校验
应用2：下拉随机选中
应用3：全选、单选、反选
<style> * { padding: 0; margin: 0; } .box { margin: 20px 200px auto; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { color: #fff; font-size: 14px; background-color: skyblue; } td { font-size: 14px; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { background-color: #fafafa; } </style></head><body> <div class="box"> <table> <thead> <tr> <th><input type="checkbox" id="all"></th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> </tbody> </table> <input type="button" value="反选" id="btn"> </div> <script> // 点击全选按钮 选择全部 var all = document.getElementById('all'); var tb = document.getElementById('tb'); var inpts = tb.getElementsByTagName('input'); var btn = document.getElementById('btn') all.onclick = function () { for (var i = 0; i < inpts.length; i++) { inpts[i].checked = all.checked } } // 点击单个选项控制全选按钮 for (var i = 0; i < inpts.length; i++) { inpts[i].onclick = function () { var allChecked = true; for (var i = 0; i < inpts.length; i++) { if (inpts[i].checked === false) { allChecked = false; } } all.checked = allChecked; } } // 反选按钮的控制 btn.onclick = function () { for (var i = 0; i < inpts.length; i++) { inpts[i].checked = !inpts[i].checked } // 单个控制全选 var allChecked = true; for (var i = 0; i < inpts.length; i++) { if (inpts[i].checked === false) { allChecked = false; } } all.checked = allChecked; } </script></body></html>自定义属性操作
• getAttribute(name) 获取标签行内属性
• setAttribute(name，value) 设置标签行内属性
• removeAttribute(name) 移除标签行内属性
• 与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性。
style 样式属性操作
• 使用 style 属性方式设置的样式显示在标签行内。
• element.style 属性的值，是所有 行内样式组成的一个样式对象。
• 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性。
• 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要
修改为驼峰命名方式书写 backgroundColor。
• 注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位。
className 类名属性操作
• 修改元素的 className 属性相当于直接修改标签的类名。
• 如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过
修改类名的方式，批量修改 css 样式。
应用1：开关灯
应用2：显示隐藏
应用3：输入框高亮显示
应用4：表格隔行变色
应用4：tab栏效果
<style> * {margin:0; padding: 0;} ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display:inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: skyblue; } .bd div { height: 255px; background-color: skyblue; display: none; } .bd div.current { display: block; } </style></head><body> <div class="box"> <div class="hd" id="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="bd" id="bd"> <div class="current">我是体育模块</div> <div>我是娱乐模块</div> <div>我是新闻模块</div> <div>我是综合模块</div> </div> </div> <script src="common.js"></script> <script> // 获取元素 var hd = my$("hd"); var spans = hd.getElementsByTagName("span"); var bd = my$("bd"); var divs = bd.getElementsByTagName("div"); // 鼠标移上某个 span 让它添加一个类名，其他的失去类名 for (var i = 0 ; i < spans.length ; i++) { // 给每一个 span 元素添加一个新的属性，记录自己在数组中的下标 spans[i].index = i; spans[i].onmouseover = function () { // console.dir(this); // 1.让 span 自己进行切换 // 排他思想： // 排除其他 for (var j = 0; j < spans.length ; j++) { spans[j].className = ""; // 由于 divs 中数据个数与 spans 一样，所以可以再同一个遍历循环中，进行排他操作 divs[j].className = ""; } // 保留自己 this.className = "current"; // console.log(this.index); // 2.让 bd 中的 div 也对应进行切换 // 对应控制思想：有两组数据中存储了相同个数的元素对象，一组对象的变化，会引起另外一组的变化 // 实现方法：找两个数据中的共同点，两个数组中元素对象的下标是一样的 // 对应控制中也会涉及到排他的操作 // 保留 div 自己的类名 divs[this.index].className = "current"; }; } </script>节点属性
• nodeType 节点的类型，属性值为数字，表示不同的节点类型，共 12 种，只读
1 元素节点
2 属性节点
3 文本节点
• nodeName 节点的名称(标签名称)，只读
• nodeValue 节点值，返回或设置当前节点的值
元素节点的 nodeValue 始终是 null
父子节点常用属性
• childNodes 只读属性，获取一个节点所有子节点的实时的集合，集合是动态变化的。
• children 只读属性，返回一个节点所有的子元素节点集合，是一个动态更新的 HTML 元素
集合。
• firstChild 只读属性，返回该节点的第一个子节点，如果该节点没有子节点则返回 null。
• lastChild 只读属性，返回该节点的最后一个子节点，如果该节点没有子节点则返回 null。
• parentNode 返回一个当前节点的父节点，如果没有这样的节点，比如说像这个节点是树结构
的顶端或者没有插入一棵树中，这个属性返回 null。
• parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM
元素，则返回 null。
兄弟节点常用属性
• nextSibling 只读属性，返回与该节点同级的下一个节点，如果没有返回null。
• previousSibling 只读属性，返回与该节点同级的上一个节点，如果没有返回null。
• nextElementSibling 只读属性，返回与该节点同级的下一个元素节点，如果没有返回null。
• previousElementSibling 只读属性，返回与该节点同级的上一个元素节点，如果没有返回null。
• 注意：nextElementSibling 和 previousElementSibling 有兼容性问题，IE9以后才支持。
创建新节点的方法
• document.createElement("div") 创建元素节点
• document.createAttribute("id") 创建属性节点
• document.createTextNode("hello") 创建文本节点
• 一般将创建的新节点存在变量中，方便使用。
节点常用操作方法 1
• parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾。
• parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节
点，并返回被替换掉的节点。
• parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入一个拥有指定
父节点的子节点，referenceNode 必须设置，如果 referenceElement 为 null 则 newNode
将被插入到子节点的末尾。
• parentNode.removeChild(child)：移除当前节点的一个子节点。这个子节点必须存在于当
前节点中。
节点常用操作方法 2
• Node.cloneNode()：克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为
Boolean 布尔值，表示是否采用深度克隆,如果为 true,则该节点的所有后代节点也都会被
克隆,如果为 false,则只克隆该节点本身，默认值为 true，节点下的内容会被克隆。
• 注意：克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，
但是通过 JavaScript 动态绑定的事件不会被复制。
节点常用操作方法 3
• Node.hasChildNodes()：没有参数，返回一个 Boolean 布尔值，来表示该元素是否包含有
子节点。
• Node.contains(child)：返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后
代节点。
判断方法总结
• 有三种方法可以判断当前节点是否有子节点。
• node.firstChild !== null
• node.childNodes.length > 0
• node.hasChildNodes()
注册事件的其他方法1
• element.addEventListener() 方法。
• 参数：
第一个参数：事件类型的字符串（直接书写”click”，不需要加 on）
第二个参数：事件函数
• 同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
• 兼容性问题：不支持 IE9 以下的浏览器
注册事件的其他方法2
• element.attachEvent() 方法。
• 参数：
第一个参数：事件类型的字符串（需要加 on）
第二个参数：事件函数
• 同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
• 兼容性问题：只支持 IE10 及以下的浏览器
移除事件的其他方法1
• element.removeEventListener() 方法。
• 参数：
第一个参数：事件类型的字符串（直接书写”click”，不需要加 on）
第二个参数：事件函数引用名
• 注意：没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数。
• 兼容性问题：不支持 IE9 以下的浏览器
移除事件的其他方法2
• element.detachEvent() 方法。
• 参数：
第一个参数：事件类型的字符串（需要加 on）
第二个参数：事件函数
• 注意：没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数。
兼容性问题：只支持 IE10 及以下的浏览器
DOM 事件流
事件流的三个阶段：
• 第一个阶段：事件捕获
• 第二个阶段：事件执行过程
• 第三个阶段：事件冒泡
• addEventListener() 第三个参数为 false 时，事件冒泡
• addEventListener() 第三个参数为 true 时，事件捕获
• onclick 类型：只能进行事件冒泡过程，没有捕获阶段
• attachEvent() 方法：只能进行事件冒泡过程，没有捕获阶段
事件委托
• 利用事件冒泡，将子级的事件委托给父级加载
• 同时，需要利用事件函数的一个 e 参数，内部存储的是事件对象
事件对象：
• 只要触发事件，就会有一个对象，内部存储了与事件相关的数据。
• e 在低版本浏览器中有兼容问题，低版本浏览器使用的是 window.event
• 事件对象常用的属性：
e.eventPhase 查看事件触发时所处的阶段
e.target 用于获取触发事件的元素
e.srcElement 用于获取触发事件的元素，低版本浏览器使用
e.currentTarget 用于获取绑定事件的事件源元素
e.type 获取事件类型
e.clientX/e.clientY 所有浏览器都支持，鼠标距离浏览器窗口左上角的距离
e.pageX/e.pageY IE8 以前不支持，鼠标距离整个HTML页面左上顶点的距离
应用：图片跟随鼠标移动案例
取消默认行为和阻止事件传播的方式
• e.preventDefault() 取消默认行为
• e.returnValue 取消默认行为，低版本浏览器使用
• e.stopPropagation(); 阻止冒泡，标准方式
• e.cancelBubble = true; 阻止冒泡，IE 低版本，标准中已废弃
偏移量属性
• offsetParent 偏移参考父级，距离自己最近的有定位的父级，如果都没有定位参考body(html)
• offsetLeft/offsetTop 偏移位置 参考父级border以内
• offsetWidth/offsetHeight 偏移大小 自身border以内的大小
偏移量属性：
客户端大小
• client 系列没有参考父级元素。
• clientLeft/clientTop 边框区域尺寸，不常用
• clientWidth/clientHeight 边框内部大小
客户端大小：
滚动偏移属性
• scrollLeft/scrollTop 盒子内部滚动出去的尺寸
• scrollWidth/scrollHeight 盒子内容的宽度和高度
滚动偏移属性：
BOM
BOM 的概念：
• BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可
以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window
对象是 BOM 的顶层对象，其他对象都是该对象的子对象。
• 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前
进、在浏览器中输入URL等。
window 对象：
• window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。
• 注意：window下两个特殊的属性 window.name、window.top。
对话框
alert()
prompt()
confirm()
onload 事件
• 我们可以给 window 对象或者 <img> 等元素添加 onload 加载事件，表示只有绑定事件的元
素加载完毕才能触发事件，才能执行事件函数。如果有多张图片直接去打印输出box盒子的高度是零，因为元素没有加载完，box盒子就没有实际撑开的高度，所以直接获取高度就是零
我们通过onload来实现获取box盒子高度（一张图片时）：
我们通过onload来实现获取box盒子高度（多张图片时）：
• 其中 window 对象加载完毕：指的是所有HTML结构加载完（如果文档多会有效率问题），并且外部引入资源（js、css、img、
视频）也加载完毕。
应用：
• 利用 window.onload 事件，可以将 js 代码提前到 html 结构之前。
• 注意：一个页面中只能有一个 window.onload 事件。
延时器
• 延时器是 window 对象的一个方法，类似于定时炸弹
• 语法：window.setTimeout(func,time);
• 第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要
加 () 。
• 第二个参数：延时的时间，以毫秒计数，1000 毫秒等于 1 秒。
• 功能：在指定的时间后，延迟执行一个函数。
清除延时器
• window 对象的一个方法
• 语法：window.clearTimeout(timeout);
• 参数：指定的延时器变量名引用。
• 功能：清除指定的延时器。
• 注意：清除的延时器需要存储到一个变量中，便于后期清除调用。
延时器-函数节流：
定时器
• 定时器是 window 对象的一个方法，相当于定时闹钟，每隔固定的时间响一次
• 语法：window.setInterval(func,interval);
• 第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要
加 () 。
• 第二个参数：时间间隔，以毫秒计数，1000 毫秒等于 1 秒。
• 功能：每隔一个指定的时间，周期性的执行一个函数。
清除定时器
• window 对象的一个方法
• 语法：window.clearInterval(timer);
• 参数：指定的定时器变量名引用。
• 功能：清除指定的定时器。
• 注意：清除的定时器需要存储到一个变量中，便于后期清除调用。
简单运动
• 简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个
运动的效果，人眼的视觉残留的时间 0.1-0.4 秒之间。
• 制作方法：通过定时器，实现每隔一个极短的时间（50-100 毫秒左右），执行函数，函数
内部让运动的属性值发生变化。
提高运动速度的方法：
• 1、缩短时间间隔，增加了每秒移动的次数。
• 2、加大步长，让每一次走的步长增加。
清除定时器的问题
问题 1
• 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况
1、多次点击开始，会造成加速
2、多次点击开始，不能够再停止
解决方法：
• 设表先关
• 每次开启新定时器之前，都清除一次前面的定时器
问题 2：
• 需求：要求元素走到指定位置停止，例如让元素停止在 500px 的位置.
• 问题：如果步长设置的不合理，停止的位置可能不是正好在 500 处。
解决方法：
• 拉终停表
• 在定时器内部每次都要判断是否走到了终点，要不要停止定时器
• 如果走到或超过了终点，强行拉到重点，并停止定时器
问题 3:
• 需求：在规定时间内让元素走到规定的结束位置，时间间隔可以更改
• 例如：让元素在 2 秒钟内，left 属性从 0 走到 500px.
解决方法:
• 步标整除
• 总距离 = 步长 * 次数；
• 时间间隔自定义，总时长固定
• 求出总次数 = 总时间 / 时间间隔
• 定义计数器变量，每执行一次定时器函数增加计数 1，直到执行达到总次数，停止定时器
location 对象的成员
• 使用 chrome 的控制台查看
• 成员：
• assign()/reload()/replace()
• hash/host/hostname/search/href……
URL
• 统一资源定位符 (Uniform Resource Locator, URL)
• URL的组成：scheme://host:port/path?query#fragment
• 例如：
http://www.lagou.com:80/a/b/index.html?name=zs&age=18#bottom• scheme:通信协议，常用的http,ftp,maito等
• host:主机，服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
• port:端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
• path:路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
• query:查询，可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数
的名和值用'='符号隔开。例如：name=zs
• fragment:信息片断，字符串，锚点.
history 对象
• history 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
• history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时
间顺序进行的记录和保存。
• back()
• forward()
• go()
在线咨询
