【JavaScript】DOM对象&JS事件总结&全局函数

简介: 本期主要介绍DOM对象&JS事件总结&全局函数

1. DOM 对象


1.1 DOM 对象是什么?有什么作用?


DOM ( Document Object Model ) 文档对象模型

文档:标记型文档( HTML 、 XML 等)

DOM 是将标记型文档中所有内容(标签、文本、属性)都封装成对象,

通过操作对象的属性或者方法,来达到操作或者改变 HTML 展示效果的目的。

1.2 DOM 树介绍


image.png

上述 HTML 文档会被浏览器 由上到下依次 加载并解析。

加载到浏览器的内存

加载并解析到内存中,会生成一张 DOM

image.png

其中:

DOM 树中所有的成员都可以成为节点(Node)

image.png

整个 DOM 树,是一个文档节点对象,即 DOM 对象。document

一个 HTML 文档加载到内存中就会形成一个 DOM 对象

1.3 DOM BOM 关系


image.png

BOM 包含了 DOM 对象

1.4 节点属性


image.png

2. JS 事件总结


常见事件

image.png

image.png

image.png

示例代码:

image.png

3. 全局函数(global


3.1 执行


image.png

作用:用于增强程序的扩展性。

注:只可以传递原始数据类型 string,传递 String 对象无作用。

3.2 编码和解码


URL/URI 编码:中文及特殊符号

%16 进制

作用:保证数据传递的完整性。

image.png

3.3 字符串转数字


image.png

parseInt(string);

string 按照字面值转换为整数类型,小数点后面部分不关注。

parseFloat(string);

string 按照字面值转换为小数类型。

注:

如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的

转换值。(例如:11.5a55, parseInt 结果 11 , parseFloat 结果 11.5 )

如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回 NaN

NaN (Not A Number,一个数字类型的标识,表示不是一个正确的数字)

image.png

相关文章
|
1天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
12 4
|
3天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
14 5
|
3天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
10 3
|
5天前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
11 2
|
6天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
13 3
|
5天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
30 1
|
8天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
12 2
|
7天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
13天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
10天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)