JS（事件，BOM，DOM，表单）_js dom 表单事件-CSDN博客

本文链接：https://blog.csdn.net/gaozhen666/article/details/116244599

本文详细解析了JavaScript中的事件与事件流，包括冒泡与捕获原理，并深入介绍了浏览器对象模型(BOM)和文档对象模型(DOM)，涉及Window对象、history对象、DOM节点操作和表单处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS（事件，BOM，DOM，表单）

在这里插入图片描述

1. 事件与事件流

事件是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。作用上可以验证用户输入的数据，增加页面的动感效果，增强用户的体验度。

几种常见的事件：

onload：当页面或图像加载完后立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下

我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。事件流分为事件冒泡与事件捕获，以下面的代码为例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
	</head>
	<body>
		<div id="myDiv">Click me</div>
	</body>
</html>

事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）；事件捕获与之相对应是相反方向，具体见下图：

在这里插入图片描述

2. BOM

BOM即浏览器对象模型，核心对象是window，它表示浏览器的一个实例。

2.1 Window对象

Window对象的方法有以下几种：

alert() ：方法用于显示带有一条指定消息和一个 OK 按钮的警告框
prompt() ：方法用于显示可提示用户进行输入的对话框
confirm() ：方法用于显示一个带有指定消息和 OK 及取消按钮的对话框
window.open()：方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
window.close()：关闭窗口
setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识clearTimeout(id)方法来清除指定函数的执行
setInterval()：可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval(id) 被调用或窗口被关闭

2.2 history对象

history对象的方法有以下几种：

back()：加载 history 列表中的前一个 URL
forward()：加载历史列表中的下一个 URL，当页面第一次访问时，还没有下一个url
go(number|URL)：URL 参数使用的是要访问的 URL，而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置，例如go(-1)是到上一个页面

2.3 local对象

local对象有一个属性为herf，可设置或返回完整的 URL。

local对象的方法：

reload()：重新加载当前文档
replace()：用新的文档替换当前文档

3. DOM对象

DOM即文档对象模型，每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

3.1 节点

节点有以下几种类型：

节点类型	HTML内容	例
文档节点	文档本身	整个文档 document
元素节点	所有的HTML元素	、、
属性节点	HTML元素内的属性	id、href、name、class
文本节点	元素内的文本	hello
注释节点	HTML中的注释

3.2 操作节点的方法

获取节点的方法：

getElementById()：根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName()：根据标签名获取dom对象数组
getElementsByClassName()：根据样式名获取dom对象数组
getElementsByName()：根据name属性值获取dom对象数组，常用于多选获取值

创建节点的方法：

createElement()：创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()：创建一个文本节点，可以传入文本内容
innerHTML：也能达到创建节点的效果，直接添加到指定位置

插入节点的方法：

appendChild()：向元素中添加新的子节点，作为最后一个子节点

根据属性间接查找节点的方法：

方法\|属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

删除节点的方法：

removeChild()：从元素中移除子节点

4. 表单

获取表单的方法：

document.表单名称
document.getElementById(表单 id)
document.forms[表单名称]
document.forms[索引]

获取input元素的方法：

document.getElementById(元素 id)
myform.元素名称
document.getElementsByName(name属性值)[索引]
document.getElementsByTagName(‘input’)[索引]

获取单选按钮的方法：

document.getElementsByName(“name属性值”)

获取多选按钮的方法：

document.getElementsByName(“name属性值”)

获取下拉选项的方法：

（1）获取 select 对象：

var ufrom = document.getElementById("ufrom");

（2）获取选中项的索引：

var idx = ufrom.selectedIndex;

（3）获取选中项 options 的 value属性值：

var val = ufrom.options[idx].value;

注意：当通过options获取选中项的value属性值时，

若没有value属性，则取option标签的内容

若存在value属性，则取value属性的值

（4）获取选中项 options 的 text：

var txt = ufrom.options[idx].text;

选中状态设定：selected=‘selected’、selected=true、selected

未选中状态设定：不设selected属性

提交表单的方法：

（1）使用普通button按钮+onclick事件+事件中编写代码:

	 获取表单.submit();

（2）使用submit按钮 + οnclick=“return 函数()” +函数编写代码:

最后必须返回：return true|false;

（3）使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:

最后必须返回：return true|false;