2021-06-08

最新推荐文章于 2021-08-06 14:28:27 发布

晏虹计科非

最新推荐文章于 2021-08-06 14:28:27 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/wwwwww234523/article/details/117713795

版权

本文深入探讨JavaScript函数的声明、调用及返回值，详细解析DOM的W3C标准，包括核心DOM、XMLDOM和HTMLDOM。同时，介绍了事件处理，如Window事件、Form事件、Keyboard事件和Mouse事件，以及如何利用JavaScript操作和导航DOM节点。

摘要由CSDN通过智能技术生成

前言

此文是个言语函数、事件、DOM相关知识点总结

提示：以下是本篇文章正文内容，下面案例可供参考

一、函数

可以封装一些代码或者功能，在调用的时候才会执行，提升代码的复用性

声明

	function 函数名（形参列表）{
                                                       执行代码
                                                       return  值；//值可以是具体的某个值 1、"4541"
                                                   }

调用

	var result=函数名（实参列表）；
	result根据函数返回值而定

注意

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行

语法

	通过 function 关键词进行定义，其后是函数名和括号 ()。
	函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）
	函数参数（Function parameters）是在函数定义中所列的名称。
	函数参数（Function arguments）是当调用函数时由函数接收的真实的值。
    在函数中，参数是局部变量。

调用

	当事件发生时（当用户点击按钮时）
	当 JavaScript 代码调用时
	自动的（自调用）

	当 JavaScript 到达 return 语句，函数将停止执行

二、DOM

    DOM是W3C（万维网联盟）的标准 "W3C文档对象模型DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构、样式".

W3C DOM标准分为3个不同部分

	核心DOM：针对任何结构化文档的标准模型
	XML DOM:针对XML文档的标准模型（定义了所有HTML元素的对象和属性，以及访问它们的方法）
	HTML DOM：针对HTML文档的标准模型
    从根本上讲，DOM操作就是在使用js操作文档元素（标签元素、标签属性元素、标签的样式、标签的事件）

节点

	整个文档是一个文档节点
	每个HTML元素是元素节点
	HTML元素内的文本是文本节点
	每个HTML属性是属性节点
	注释是注释节点

方法

	编程接口：可以通过javascript（以及其他编程语言）对HTML DOM进行访问
	所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性
	方法是可以执行的动作（添加/修改元素）

属性是可以获取或者设置的值(节点名称/内容)

		getElementById(id)：获取带有执行id的节点（元素）
		getElementsByTagName(tag)：获取所有指定标签的节点，p标签等
		getElementsByClassName（class）：获取所有指定类型的节点
		createElement(ele)：创建新标签元素
		createTextNode（txt）：创建文本节点
		insertBefore(newNode，node)：在node节点之后插入newNode
		appendChild(node)：插入新节点（元素），作为父节点的最后一个子节点
		replaceNode(newNode,oldNode)：替换旧元素
		removeChild(node)：删除子节点（元素）
		innerHTML：节点（元素）的文本值
		parentNode：节点（元素）的父节点
		childNodes：节点（元素）的子节点
		attributes：节点（元素）的属性节点

HTML DOM属性

	innerHTML属性：获取元素内容
	nodeName属性规定节点名称
	nodeName属性是只读属性
	元素节点的nodeName与标签名称相同
	属性节点的nodeName与属性名称相同
	文本节点的nodeName始终是#text
	文档节点的nodeName始终是#document
	nodeName始终包含HTML元素的大写字母标签名称
	nodeValue属性规定节点值
	元素节点的nodeValue是undefined或null
	文本节点的nodeValue是文本本身
	属性节点的nodeValue是属性值
	nodeType属性返回节点类型，只读属性

访问查找HTML元素

	getElementById（id）：获取指定id的元素
	getElementsByTagName（tag）：获取带有指定标签名（p标签，a标签等）的所有元素
	getElementsByClassName（class）：获取带有相同类名的所有元素

修改

	改变元素文本内容 parentNode.innerHTML node.nodeValue
	改变CSS样式 node.style
	改变HTML属性
	创建新的HTML元素 createElement - createTextNode- appendChild
	删除已有的HTML元素 parentNode.removeChild (childNode) childNode.parentNode.removeChild(childNode)
	改变事件（处理程序）

事件

	用户点击鼠标 onclick
	onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
	onload 和 onunload 事件可用于处理 cookies。
	网页已经加载 onload
	离开网页 onunload
	图片已经加载
	鼠标移动到元素上 onmouseover
	鼠标离开元素 onmouserout
	输入字段改变 onchange
	HTML表单提交 onsubmit
	用户出发按键 onkeydown

	使用节点关系在节点数中导航
		getElementsByTagName（tag）方法返回节点列表，节点列表是一个节点数组，可以通过下标访问某个节点元素，下标号从0开始
		导航节点关系：三个节点属性 parentNode，firstChild，lastChild
		DOM根节点：可以访问全部文档 document.documentElement –全部文档
		Document.body ---文档主题

三、事件

Window 事件属性

	针对 window 对象触发的事件（应用到 <body> 标签）

示例：

		onafterprint(script)：文档打印之后运行的脚本。
		onbeforeprint(script)：文档打印之前运行的脚本。
		onbeforeunload(script)：文档卸载之前运行的脚本。
		onerror(script)：在错误发生时运行的脚本。
		onhaschange(script)：	当文档已改变时运行的脚本。
		onload(script)：	页面结束加载之后触发。
		onmessage(script)：	在消息被触发时运行的脚本。
		onoffline(script)：当文档离线时运行的脚本。
		ononline(script)：当文档上线时运行的脚本。
		onpagehide(script)：当窗口隐藏时运行的脚本。
		onpageshow(script)：当窗口成为可见时运行的脚本。
		onpopstate(script)：当窗口历史记录改变时运行的脚本。
		onredo	(script)：当文档执行撤销（redo）时运行的脚本。
		onresize(script)：当浏览器窗口被调整大小时触发。
		onstorage(script)：在 Web Storage 区域更新后运行的脚本。
		onundo(script)：在文档执行 undo 时运行的脚本。
		onunload(script)：一旦页面已下载时触发（或者浏览器窗

Form 事件

	由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form）

示例

		onblur(script)：元素失去焦点时运行的脚本。
		onchange(script)：在元素值被改变时运行的脚本。
		oncontextmenu(script)：当上下文菜单被触发时运行的脚本。
		onfocus(script)：当元素获得焦点时运行的脚本。
		onformchange	(script)：在表单改变时运行的脚本。
		onforminput(script)：当表单获得用户输入时运行的脚本。
		oninput(script)：当元素获得用户输入时运行的脚本。
		oninvalid(script)：当元素无效时运行的脚本。
		onreset(script)：当表单中的重置按钮被点击时触发。HTML5 中不支持。
		onselect(script)：在元素中文本被选中后触发。
		onsubmit	(script)：在提交表单时触发。

Keyboard 事件

	onkeydown(script)在用户按下按键时触发。
	onkeypress(script)在用户敲击按钮时触发。
	onkeyup(script)当用户释放按键时触发。

Mouse 事件

	onclick(script)元素上发生鼠标点击时触发。
	ondblclick(script)元素上发生鼠标双击时触发。
	ondrag（(script))元素被拖动时运行的脚本。
	ondragend(script)在拖动操作末端运行的脚本。
	ondragenter(script)	当元素元素已被拖动到有效拖放区域时运行的脚本。
	ondragleave(script)当元素离开有效拖放目标时运行的脚本。
	ondragover(script)当元素在有效拖放目标上正在被拖动时运行的脚本。
	ondragstart(script)在拖动操作开端运行的脚本。
	ondrop(script)当被拖元素正在被拖放时运行的脚本。
	onmousedown(script)当元素上按下鼠标按钮时触发。
	onmousemove(script)当鼠标指针移动到元素上时触发。
	onmouseout(script)当鼠标指针移出元素时触发。
	onmouseover(script)当鼠标指针移动到元素上时触发。
	onmouseup(script)当在元素上释放鼠标按钮时触发。
	onmousewheel(script)当鼠标滚轮正在被滚动时运行的脚本。
	onscroll(script)当元素滚动条被滚动时运行的脚本。

Media 事件

	由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）

示例

		onabort(script)在退出时运行的脚本。
		oncanplay(script)当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时)
		oncanplaythrough(script)	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
		ondurationchange	(script)	当媒介长度改变时运行的脚本。
		onemptied	(script)	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
		onended	(script)	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
		onerror	(script)	当在文件加载期间发生错误时运行的脚本。
		onloadeddata	(script)	当媒介数据已加载时运行的脚本。
		onloadedmetadata	(script)	当元数据（比如分辨率和时长）被加载时运行的脚本。
		onloadstart	(script)	在文件开始加载且未实际加载任何数据前运行的脚本。
		onpause	(script)	当媒介被用户或程序暂停时运行的脚本。
		onplay	(script)	当媒介已就绪可以开始播放时运行的脚本。
		onplaying	(script)	当媒介已开始播放时运行的脚本。
		onprogress	(script)	当浏览器正在获取媒介数据时运行的脚本。
		onratechange	(script)	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
		onreadystatechange	(script)	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
		onseeked	(script)	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
		onseeking	(script)	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
		onstalled	(script)	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
		onsuspend	(script)	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
		ontimeupdate	(script)	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
		onvolumechange	(script)	每当音量改变时（包括将音量设置为静音）时运行的脚本。
		onwaiting	(script)	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
		HTML 全局属性
		HTML 颜色名 
		HTML 参考手册
		HTML 实例
		HTML 测验
		HTML 教程

晏虹计科非

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-08

文章目录前言一、函数声明调用注意语法调用返回二、DOMW3C DOM标准分为3个不同部分节点方法属性是可以获取或者设置的值(节点名称/内容)HTML DOM属性访问查找HTML元素修改事件导航三、事件Window 事件属性示例：Form 事件示例Keyboard 事件Mouse 事件Media 事件示例前言此文是个言语函数、事件、DOM相关知识点总结提示：以下是本篇文章正文内容，下面案例可供参考一、函数可以封装一些代码或者功能，在调用的时候才会执行，提升代码的复用性声明 functio.
复制链接

扫一扫