【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

相关文章
|
3月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
2月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
47 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
57 5
|
2月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
3月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
59 0
|
3月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
33 0