- 1数字设计FPGA应用学习笔记
- 2实战示例：详解如何用ChatpGPT做嵌入式串口协议对接_chatgpt对接
- 3java http ssl_java-将HttpClient与SSL和证书一起使用
- 4本地搭建大模型知识库Ollama+AnythingLLM（下）_llama模型 本地资料知识库,总是找不对答案
- 5AI绘图：Stable Diffusion WEB UI 详细操作介绍：进阶-面部修复和调参
- 6JWT令牌、过滤器Filter、拦截器Interceptor
- 7四相五线步进电机_4相5线步进电机接线图
- 8scala-MLlib官方文档---spark.ml package--Classification and regression_import org.apache.spark.ml.classification.linearsv
- 9HTTP与HTTPS区别_既然说 http 是明文传输,为什么
- 10头歌实践教学平台Python-Python第九章作业（初级）_头歌平台python第九章
前端技术学习第四讲：JavaScript中DOM和BOM_js中bom和dom
赞
踩
JavaScript中DOM和BOM
一、DOM和BOM
DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。
BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
图中A部分为DOM管理，根节点为Document。
图中B部分为BOM管理，根节点为Window。
二、DOM属性和方法
DOM是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在 DOM 中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个逻辑树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。
借助 DOM 可以使用 JavaScript 来访问、修改、删除或添加 HTML 文档中的任何内容或调整HTML中CSS的样式。
DOM常用属性
| 属性名称 | 属性描述 |
|---|---|
| document.body | 返回文档的 body 元素 |
| document.domain | 返回当前文档的域名 |
| document.forms | 返回文档中所有 Form 对象的引用 |
| document.images | 返回文档中所有 Image 对象的引用 |
| document.inputEncoding | 返回文档的编码方式 |
| document.referrer | 返回载入当前文档的 URL |
| document.scripts | 返回页面中所有脚本的集合 |
| document.title | 返回当前文档的标题 |
| document.URL | 返回文档的完整 URL |
DOM常用方法
| 方法名称 | 方法描述 |
|---|---|
| document.getElementsByClassName() | 返回文档中所有具有指定类名的元素集合 |
| document.getElementById() | 返回文档中具有指定 id 属性的元素 |
| document.getElementsByName() | 返回具有指定 name 属性的对象集合 |
| document.getElementsByTagName() | 返回具有指定标签名的对象集合 |
| document.write() | 向文档中写入某些内容 |
| document.writeln() | 等同于 write() 方法，不同的是 writeln() 方法会在末尾输出一个换行符 |
三、DOM元素对象（element对象）
在Document对象中，例如getElementsByTagName()、getElementById()、getElementsByClassName() 等方法调用时，会返回一个element对象，element对象代表元素对象。
element对象常用属性
| 属性名称 | 属性描述 |
|---|---|
| element.attributes | 返回一个元素的属性数组 |
| element.childNodes | 返回元素的一个子节点的数组 |
| element.children | 返回元素中子元素的集合 |
| element.classList | 返回元素中类名组成的对象 |
| element.className | 设置或返回元素的 class 属性 |
| element.clientHeight | 返回内容的可视高度（不包括边框，边距或滚动条） |
| element.clientWidth | 返回内容的可视宽度（不包括边框，边距或滚动条） |
| element.contentEditable | 设置或返回元素的内容是否可编辑 |
| element.dir | 设置或返回一个元素中的文本方向 |
| element.firstChild | 返回元素中的第一个子元素 |
| element.id | 设置或者返回元素的 id |
| element.innerHTML | 设置或者返回元素的内容 |
| element.isContentEditable | 返回元素内容是否可编辑，如果可编辑则返回 true，否则返回 false |
| element.lang | 设置或者返回一个元素的语言 |
| element.lastChild | 返回元素的最后一个子元素 |
| element.nextSibling | 返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点） |
| element.nextElementSibling | 返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点） |
| element.nodeName | 返回元素名称（大写） |
| element.nodeType | 返回元素的节点类型 |
| element.nodeValue | 返回元素的节点值 |
| element.offsetHeight | 返回元素的高度，包括边框和内边距，但不包括外边距 |
| element.offsetParent | 返回距离该元素最近的进行过定位的父元素 |
| element.ownerDocument | 返回元素的根元素（文档对象） |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点） |
| element.previousElementSibling | 返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点） |
| element.scrollHeight | 返回元素的完整高度（包括被滚动条隐蔽的部分） |
| element.scrollLeft | 设置或返回元素滚动条距离元素左侧的距离 |
| element.scrollTop | 设置或返回元素滚动条距离元素上方的距离 |
| element.scrollWidth | 返回元素的完整宽度（包括被滚动条隐蔽的部分） |
| element.style | 设置或返回元素的样式属性 |
| element.tabIndex | 设置或返回元素的标签顺序 |
| element.tagName | 以字符的形式返回元素的名称（大写） |
| element.textContent | 设置或返回某个元素以及其中的文本内容 |
| element.title | 设置或返回元素的 title 属性 |
| element.length | 返回对象的长度 |
element对象常用方法
| 方法名称 | 方法描述 |
|---|---|
| element.getAttribute() | 通过属性名称获取指定元素的属性值 |
| element.getAttributeNode() | 通过属性名称获取指定元素得属性节点 |
| element.getElementsByTagName() | 通过标签名获取当前元素下的所有子元素的集合 |
| element.getElementsByClassName() | 通过类名获取当前元素下的子元素的集合 |
| element.hasAttribute() | 判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false |
| element.hasAttributes() | 判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false |
| element.hasChildNodes() | 判断一个元素是否具有子元素，有则返回 true，没有则返回 false |
| element.hasFocus() | 判断元素是否获得了焦点 |
| element.setAttribute() | 设置或者修改指定属性的值 |
| element.setAttributeNode() | 设置或者修改指定的属性节点 |
四、DOM元素属性对象（attributes对象）
在DOM中，通过 attributes 对象来表示 HTML 属性，在 attributes 对象中提供了多种添加、修改和删除 HTML 属性的方法。
| 属性/方法 | 描述 |
|---|---|
| attributes.name | 返回属性名称 |
| attributes.value | 设置或者返回属性的值 |
| attributes.specified | 如果定义了指定属性，则返回 true，否则返回 false |
| nodemap.getNamedItem() | 从节点列表中返回的指定属性节点 |
| nodemap.item() | 返回节点列表中处于指定索引号的节点 |
| nodemap.length | 返回节点列表的节点数目 |
| nodemap.removeNamedItem() | 删除指定属性节点 |
| nodemap.setNamedItem() | 设置指定属性节点（通过名称） |
五、BOM属性和方法
浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。
BOM常用属性
| 属性名称 | 属性描述 |
|---|---|
| closed | 返回窗口是否已被关闭 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本 |
| document | 对 Document 对象的只读引用 |
| frames | 返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 < frame > 或 < iframe > 标签 |
| history | 对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL |
| innerHeight | 返回浏览器窗口的高度，不包含工具栏与滚动条 |
| innerWidth | 返回浏览器窗口的宽度，不包含工具栏与滚动条 |
| length | 返回当前窗口中 < iframe > 框架的数量 |
| name | 设置或返回窗口的名称 |
| navigator | 对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息 |
| opener | 返回对创建此窗口的 window 对象的引用 |
| outerHeight | 返回浏览器窗口的完整高度，包含工具栏与滚动条 |
| outerWidth | 返回浏览器窗口的完整宽度，包含工具栏与滚动条 |
| pageXOffset | 设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离 |
| pageYOffset | 设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离 |
| parent | 返回父窗口 |
| screen | 对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息 |
| screenLeft | 返回浏览器窗口相对于计算机屏幕的 X 坐标 |
| screenTop | 返回浏览器窗口相对于计算机屏幕的 Y 坐标 |
| screenX | 返回浏览器窗口相对于计算机屏幕的 X 坐标 |
| screenY | 返回浏览器窗口相对于计算机屏幕的 Y 坐标 |
| status | 设置窗口状态栏的文本 |
| top | 返回最顶层的父窗口 |
BOM常用方法
| 方法名称 | 方法描述 |
|---|---|
| alert() | 在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮 |
| blur() | 把键盘焦点从顶层窗口移开 |
| clearInterval() | 取消由 setInterval() 方法设置的定时器 |
| clearTimeout() | 取消由 setTimeout() 方法设置的定时器 |
| close() | 关闭某个浏览器窗口 |
| confirm() | 在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮 |
| createPopup() | 创建一个弹出窗口，注意：只有 IE 浏览器支持该方法 |
| focus() | 使一个窗口获得焦点 |
| getSelection() | 返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置 |
| getComputedStyle() | 获取指定元素的 CSS 样式 |
| moveBy() | 将浏览器窗口移动指定的像素 |
| moveTo() | 将浏览器窗口移动到一个指定的坐标 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| print() | 打印当前窗口的内容 |
| prompt() | 显示一个可供用户输入的对话框 |
| resizeBy() | 按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素 |
| resizeTo() | 将窗口的大小调整到指定的宽度和高度 |
| scrollBy() | 将窗口的内容滚动指定的像素 |
| scrollTo() | 将窗口的内容滚动到指定的坐标 |
| setInterval() | 创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式 |
| setTimeout() | 创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次 |
| stop() | 停止页面载入 |
六、BOM浏览器对象（Navigator对象）
navigator 对象中存储了与浏览器相关的信息，例如名称、版本等，我们可以通过 window 对象的 navigator 属性（即 window.navigator）来引用 navigator 对象，并通过它来获取浏览器的基本信息。
由于 window 对象是一个全局对象，因此在使用 window.navigator 时可以省略 window 前缀。
Navigator常用属性
| 属性名称 | 属性方法 |
|---|---|
| appCodeName | 返回当前浏览器的内部名称（开发代号） |
| appName | 返回浏览器的官方名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回浏览器是否启用 cookie，启用返回 true，禁用返回 false |
| onLine | 返回浏览器是否联网，联网则返回 true，断网则返回 false |
| platform | 返回浏览器运行的操作系统平台 |
| userAgent | 返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称 |
七、BOM屏幕对象（Screen对象）
screen 对象中包含了有关计算机屏幕的信息，例如分辨率、宽度、高度等，我们可以通过 window 对象的 screen 属性来获取它。由于 window 对象是一个全局对象，因此在使用 window.screen 时可以省略 window 前缀。
Screen常用属性
| 属性名称 | 属性描述 |
|---|---|
| availTop | 返回屏幕上方边界的第一个像素点（大多数情况下返回 0） |
| availLeft | 返回屏幕左边边界的第一个像素点（大多数情况下返回 0） |
| availHeight | 返回屏幕的高度（不包括 Windows 任务栏） |
| availWidth | 返回屏幕的宽度（不包括 Windows 任务栏） |
| colorDepth | 返回屏幕的颜色深度（color depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。 |
| height | 返回屏幕的完整高度 |
| pixelDepth | 返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24 |
| width | 返回屏幕的完整宽度 |
| orientation | 返回当前屏幕的方向 |
八、BOM路径对象（Location对象）
location 对象中包含了有关当前页面链接（URL）的信息，例如当前页面的完整 URL、端口号等，我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象，因此在使用 window.location 时可以省略 window 前缀。
Location常用属性
| 属性名称 | 属性描述 |
|---|---|
| hash | 返回一个 URL 中锚的部分，例如：http://c.biancheng.net#js 中的 #js。 |
| host | 返回一个 URL 的主机名和端口号，例如 http://c.biancheng.net:8080。 |
| hostname | 返回一个 URL 的主机名，例如 http://c.biancheng.net。 |
| href | 返回一个完整的 URL，例如 http://c.biancheng.net/javascript/location- |
| pathname | 返回一个 URL 中的路径部分，开头有个 /。 |
| port | 返回一个 URL 中的端口号，如果 URL 中不包含明确的端口号，则返回一个空字符串 ’ '。 |
| protocol | 返回一个 URL 协议，即 URL 中冒号:及其之前的部分，例如 http: 和 https:。 |
| search | 返回一个 URL 中的查询部分，即 URL 中 ? 及其之后的一系列查询参数。 |
| Location常用方法 | |
| 方法名称 | 方法描述 |
| – | – |
| assign() | 加载指定的 URL，即载入指定的文档。 |
| reload() | 重新加载当前 URL。 |
| replace() | 用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace() 替换的新页面不会保存在浏览历史中，用户不能使用后退来返回该页面。 |
九、BOM浏览历史对象（History对象）
history 对象中包含了用户在浏览器中访问过的历史记录，其中包括通过浏览器浏览过的页面，以及当前页面中通过< iframe >加载的页面。我们可以通过 window 对象中的 history 属性来获取 history 对象，由于 window 对象是一个全局对象，因此在使用window.history 时可以省略 window 前缀。
History常用属性
| 属性名称 | 属性方法 |
|---|---|
| length | 返回浏览历史的数目，包含当前已经加载的页面。 |
| scrollRestoration | 利用浏览器特性，使我们在返回上一页或者下一页时，将页面滚动到之前浏览的位置，该属性有两个值，分别是 auto（表示滚动）与 manual（表示不滚动）。 |
| state | 返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。 |
History常用方法
| 方法名称 | 方法描述 |
|---|---|
| back() | 参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的 ← 按钮来实现同样的效果。 |
| forward() | 参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的 → 按钮来实现同样的效果。 |
| go() | 参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页。 |
| pushState() | 向浏览器的历史记录中插入一条新的历史记录。 |
| replaceState() | 使用指定的数据、名称和 URL 来替换当前历史记录。 |
十、JavaScript事件处理
JavaScript 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。
event事件：事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件
| 事件 | 描述 | |
|---|---|---|
| 键盘鼠标事件 | onclick | 鼠标单击事件 |
| onclick | 点击鼠标时触发此事件 | |
| ondblclick | 双击鼠标时触发此事件 | |
| onmousedown | 按下鼠标时触发此事件 | |
| onmouseup | 鼠标按下后又松开时触发此事件 | |
| onmouseover | 当鼠标移动到某个元素上方时触发此事件 | |
| onmousemove | 移动鼠标时触发此事件 | |
| onmouseout | 当鼠标离开某个元素范围时触发此事件 | |
| onkeypress | 当按下并松开键盘上的某个键时触发此事件 | |
| onkeydown | 当按下键盘上的某个按键时触发此事件 | |
| onkeyup | 当放开键盘上的某个按键时触发此事件 | |
| 窗口事件 | onabort | 图片在下载过程中被用户中断时触发此事件 |
| onbeforeunload | 当前页面的内容将要被改变时触发此事件 | |
| onerror | 出现错误时触发此事件 | |
| onload | 页面内容加载完成时触发此事件 | |
| onmove | 当移动浏览器的窗口时触发此事件 | |
| onresize | 当改变浏览器的窗口大小时触发此事件 | |
| onscroll | 当滚动浏览器的滚动条时触发此事件 | |
| onstop | 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件 | |
| oncontextmenu | 当弹出右键上下文菜单时触发此事件 | |
| onunload | 改变当前页面时触发此事件 | |
| 表单事件 | onblur | 当前元素失去焦点时触发此事件 |
| onchange | 当前元素失去焦点并且元素的内容发生改变时触发此事件 | |
| onfocus | 当某个元素获得焦点时触发此事件 | |
| onreset | 当点击表单中的重置按钮时触发此事件 | |
| onsubmit | 当提交表单时触发此事件 | |
事件绑定
事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML 事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyJavaScript</title>
</head>
<body>
<button type="button" onclick="myBtn()">按钮</button>
<script type="text/javascript">
function myBtn(){
alert("Hello JavaScript!");
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyJavaScript</title> </head> <body> <button type="button" id="myBtn">按钮</button> <script> function sayHello() { alert('Hello JavaScript!'); } document.getElementById("myBtn").onclick = sayHello; </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
