前端理论总结(js)——DOM、BOM

什么是DOM?

DOM 指的是Document Object Model(文档对象模型),它指的是把文档当做一个对象来对待,这个对象主要定义了处理网页内容的方法和接口。

有什么用?

就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以了:

document.title = 'how to make love';

DOM的操作方法

document.getElementById(‘id’)                                   通过元素 id 来查找元素 
document.getElementsByTagName(‘name’)               通过标签名来查找元素
document.getElementsByClassName(‘class’)             通过类名来查找元素
document.getElementsByName(‘name’)                     通过表单元素中 name 名查找元素
document.querySelector(‘CSS 选择器’)                 通过 CSS 选择器获取匹配上的第一个元素
document.querySelectorAll(‘CSS 选择器’)             通过 CSS 选择器获取匹配上的所有元素
document.createElement(tagname)                       创建一个由tagName决定的HTML元素
document.createTextNode(data)                            创建一个文本节点,文本内容为data
元素.innerHTML = 内容                                     改变元素的内容(包含内部标签)可识别标签
元素.属性 = 属性值                                                 改变 HTML 元素的属性值
元素.style.样式 = 样式值                                         改变 HTML 元素的样式

什么是BOM?

BOM 指的是Browser Object Model(浏览器对象模型),它指的是把浏览器当做一个对象来对待,这个对象主要定义了与浏览器进行交互的方法和接口。BOM
的核心是 window,而 window 对象具有双重角色,它既是通过 js 访问浏览器窗口的一个接口,又是一个 Global(全局)对象。

这意味着在网页中定义的任何对象,变量和函数,都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象,并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对
象的子对象。

有什么用?

为了控制浏览器的行为

BOM的操作方法

window.open()                     打开新窗口
window.close()                     关闭当前窗口
window.moveTo()                 移动当前窗口
window.resizeTo()                 调整当前窗口的尺寸
window.innerWidth               浏览器窗口宽度
window.innerHeight              浏览器窗口高度
window.history.back()           加载历史列表中的上一个 URL(后退)
window.history.go(number)  加载历史列表中某个页面
alert()                                    警告框
confirm()                               确认框
prompt()                                提示框

ヾ( ̄▽ ̄)Bye~Bye~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【二叉树】Leetcode 94. 二叉树的中序遍历【简单】

二叉树的中序遍历 给定一个二叉树的根节点 root ,返回 它的 中序 遍历 。 示例 1: 输入:root [1,null,2,3] 输出:[1,3,2] 解题思路 中序遍历是一种二叉树遍历方式,按照“左根右”的顺序遍历二叉树节点。 1、递归…

python 处理png图片无损压缩

代码利用了Pillow库来处理图片的压缩,并使用了 glob 模块来搜索所有的 .png 文件。这个脚本应该能够按照当前的编写来完成预期的工作。 请注意,compress_level9 指定了Pillow保存PNG图片时采用的最大压缩等级。这确保了每张图片都被以可能的最小文件大小…

线程安全(买票案例):加锁方式(synchronized、Lock锁)【同步代码块、同步方法】--学习JavaEE的day31上

day31上 线程安全 – 加锁 注意:要想多个线程互斥住,就必须使用同一把锁(对象)!!! 加锁方式 synchronized Lock synchronized 继day30的售票需求案例学习 学习思路: 1.使用线程类、任务类方式不同 2.加锁方…

【Spring】Spring框架中的一个核心接口ApplicationContext 简介,以及入口 Run() 的源码分析

一、简介 ApplicationContext 是Spring框架中的一个核心接口,它是Spring IoC容器的实现之一,用于管理和组织应用程序中的各种Bean,同时提供了一系列功能来支持依赖注入、AOP等特性。 简单来说,ApplicationContext 是一个大型的、…

求两个单链表的差集

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 但行前路,不负韶华&#…

发车,易安联签约某新能源汽车领军品牌,为科技创新保驾护航

近日,易安联成功签约某新能源汽车领军品牌,为其 数十万终端用户 建立一个全新的 安全、便捷、高效一体化的零信任终端安全办公平台。 随着新能源汽车行业的高速发展,战略布局的不断扩大,技术创新不断引领其市场价值走向高点&am…

移动端Web笔记day03

移动 Web 第三题 01-移动 Web 基础 谷歌模拟器 模拟移动设备,方便查看页面效果,移动端的效果是当手机屏幕发生了变化,页面和页面中的元素也要跟着等比例变化。 屏幕分辨率 分类: 硬件分辨路 -> 物理分辨率:硬件…

GTC 2024 火线评论:DPU 重构文件存储访问

编者按:英伟达2024 GTC 大会上周在美国加州召开,星辰天合 CTO 王豪迈在大会现场参与了 GPU 与存储相关的最新技术讨论,继上一篇《GTC 2024 火线评论:GPU 的高效存储利用》之后,这是他发回的第二篇评论文章。 上一篇文章…

Spring框架与Spring Boot的区别和联系

引言 Spring框架和Spring Boot都是Java生态中最受欢迎的开源框架,它们各自扮演着不同的角色,帮助开发者构建高效的企业级应用。本教程将从零基础的角度出发,让你轻松理解这两者的区别和联系。 Spring框架简介 Spring框架,简称Spri…

C#中让字典、列表、数组作为只读的方法参考

一、字典 在 C# 中&#xff0c;可以通过使用 ReadOnlyDictionary<TKey, TValue> 类或者是通过调用普通字典的 .AsReadOnly() 方法来创建一个只读的字典。ReadOnlyDictionary 不允许修改字典&#xff0c;任何试图改变字典的操作都会抛出 NotSupportedException。 以下是使…

pear-admin 项目结构讲解

上一篇文章介绍了pear-admin用到flask的技术&#xff0c; 深入代码后发现其结构也是令人眼前一亮&#xff0c; 结构化&#xff0c;模块化&#xff0c; 解耦做得非常优秀。 整个项目数据库使用migrate做了版本管理&#xff0c; 使用marshmallow做了序列化&#xff0c;这样数据库…

vue实现文字一个字一个字的显示(开箱即用)

图示&#xff1a; 核心代码 Vue.prototype.$showHtml function (str, haveCallback null) {let timeFlag let abcStr for (let i 0; i < str.length; i) {(function (i) {timeFlag setTimeout(function () {abcStr str[i]haveCallback(abcStr)if ((i 1) str.length…

EPSON推出的实时时钟模块RX8130CE功耗低至300nA、从容应对各种使用场景

随着科技的进步和消费者需求的不断变化&#xff0c;笔记本电脑市场继续展现出强劲的发展势头一方面移动性和轻薄性成为主流&#xff0c;另外一方面性能在不断提升&#xff0c;功能也日益丰富。实时时钟模组&#xff0c;作为提供时间和定时功能的单元模块&#xff0c;是笔记本电…

解决错误LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to

react native pod第三方包或者git clone的时候遇到 OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443两种解决方案 方法一 修改计算机网络配置 由于使用 IPv6 的原因&#xff0c;可能会导致这一问题的出现 系统在解析hostname时使用了ipv6 可以配…

【工具】秘塔AI搜索|强烈推荐,中文免费搜索神器!堪比做报表的员工

网址&#xff1a;https://metaso.cn/ 使用时间&#xff1a;2024/03/27 以前其实用过它家的秘塔写作猫&#xff0c;当时感觉非常不错。 这次看到它出AI搜索&#xff0c;感觉开发者挺有野心和实力的。 推荐原因&#xff1a; 国产产品&#xff0c;中文适用性强。目前还免费。【不…

工业镜头常用参数之实效F(Fno.)和像圈

Fno. 工业镜头中常用到的参数F&#xff0c;有时候用F/#&#xff0c;Fno.来表示&#xff0c;指的是镜头通光能力的参数。它可用镜头焦距及入瞳直径来表示&#xff0c;也可通过镜头数值孔径&#xff08;NA&#xff09;和光学放大倍率&#xff08;β&#xff09;来计算。有效Fno.…

LeetCode题练习与总结:全排列Ⅱ

一、题目描述 给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,2] 输出&#xff1a; [[1,1,2],[1,2,1],[2,1,1]]示例 2&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[…

IDEA使用常用的设置

一、IDEA常用设置 可参考&#xff1a;IDEA这样配置太香了_哔哩哔哩_bilibili 波波老师 二、插件 可参考&#xff1a;IDEA好用插件&#xff0c;强烈推荐_哔哩哔哩_bilibili 波波老师 三、其他 学会用点“.” IDEA弹窗Servers certificate is not trusted怎么禁止&#xf…

QEMU安装和使用@Ubuntu(待续)

参考这篇文档&#xff1a;在 QEMU 上运行 RISC-V 64 位版本的 Linux - 知乎 参考官方文档&#xff1a;Running 64- and 32-bit RISC-V Linux on QEMU — RISC-V - Getting Started Guide FreeBSD riscv下载&#xff1a;Index of /freebsd/releases/riscv/14.0-RELEASE/ Linux…

共享旅游卡到底是怎么回事?

共享旅游卡&#xff0c;一种引领旅游新风尚的智能卡片&#xff0c;正以其独特的方式改变着人们的旅游体验。千益畅行旅游卡&#xff0c;作为共享旅游卡的杰出代表&#xff0c;正逐渐成为旅游市场的新宠。 那么&#xff0c;共享旅游卡到底是什么&#xff1f;它又如何改变了我们…