【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

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
18天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
22天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
21天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
22天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
22天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
9天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
24 0
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具