JavaScript-Web API基本认知-什么是DOM和BOM

news2024/11/19 1:45:04

基本认知

  • var、let、const选用
  • Web API作用和分类
  • 什么是DOM
  • 什么是DOM树
  • DOM对象(重要)
  • 什么是BOM

var、let、const选用

var or let or const ?
首先var 先排除,老派写法,问题很多,可以淘汰掉…
let or const ?
建议: const 优先,尽量使用const,原因是:const 语义化更好
很多变量我们声明的时候就知道他不会被更改了,那为什么不用 const呢?
实际开发中也是,比如react框架,基本const
如果你还在纠结,那么我建议:
有了变量先给const,如果发现它后面是要被修改的,再改为let

const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型,const声明的变量,里面存的不是 值,不是值,不是值,是 地址,所以不变的是地址

Web API作用和分类

  • 作用: 就是使用 JS 去操作 html 和浏览器
  • 分类:DOM (文档对象模型)、BOM(浏览器对象模型)

什么是DOM

  • DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
  • 白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能
  • DOM作用:开发网页内容特效和实现用户交互

什么是DOM树

  • 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
  • 描述网页内容关系的名词
  • 作用:文档树直观的体现了标签与标签之间的关系
    在这里插入图片描述

DOM对象(重要)

  • DOM对象:浏览器根据html标签生成的 JS对象
    • 所有的标签属性都可以在这个对象上面找到
    • 修改这个对象的属性会自动映射到标签身上
  • DOM的核心思想
    • 把网页内容当做对象来处理
  • document 对象
    • 是 DOM 里提供的一个对象
    • 所以它提供的属性和方法都是用来访问和操作网页内容的
      • 例:document.write()
    • 网页所有内容都在document里面

什么是BOM

l BOM(Browser Object Model ) 是浏览器对象模型
在这里插入图片描述

  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

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

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

相关文章

Docker 的数据管理 与 Docker 镜像的创建

目录 一、Docker 的数据管理 1.1.数据卷 1.2.数据卷容器 1.3.容器互联(使用centos镜像) 二、Docker 镜像的创建 2.1.基于现有镜像创建 2.2.基于本地模板创建 2.3.基于Dockerfile创建 2.3.1联合文件系统(UnionFs) 2.3.2…

多线程模型浅谈

优质博文:IT-BLOG-CN 笔者近期在维护的项目中发现了一些比较随机的问题,时有时无的,排查之后发现是使用多线程导致的,恍然之下研究了下多线程的底层模型相关知识,现不大家简要分享下。 一个程序进程可包含多个线程&am…

全志ARM-超声波测距

超声波测距模块是用来测量距离的一种产品,通过发送和收超声波,利用时间差和声音传播速度, 计算出模块到前方障碍物的距离 1.测距原理: 给Trig端口至少10us的高电平发送声波,Echo信号,由低电平跳转到高电平…

【语音识别】搭建本地的语音转文字系统:FunASR(离线不联网即可使用)

参考自: 参考配置:FunASR/runtime/docs/SDK_advanced_guide_offline_zh.md at main alibaba-damo-academy/FunASR (github.com)参考配置:FunASR/runtime/quick_start_zh.md at 861147c7308b91068ffa02724fdf74ee623a909e alibaba-damo-aca…

绘唐科技AIGC怎么激活

绘唐科技AIGC怎么激活绘唐科技AIGC怎么激活绘唐科技AIGC怎么激活绘唐科技AIGC怎么激活 这里激活免费3天体验 Docshttps://qvfbz6lhqnd.feishu.cn/wiki/D3YLwmIzmivZ7BkDij6coVcbn7W

【Django】初识Django快速上手

Django简介 Django是一个高级的、开源的Python Web框架,旨在快速、高效地开发高质量的Web应用程序 https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Django/Introduction 安装Django pip install Django如果要知道安装的Django的版本,可…

机器学习:深入解析SVM的核心概念(问题与解答篇)【一、间隔与支持向量】

直接阅读原始论文可能有点难和复杂,所以导师直接推荐我阅读周志华的《西瓜书》!!然后仔细阅读其中的第六章:支持向量机 间隔与支持向量 问题一:什么叫法向量?为什么是叫法向量 在这个线性方程中&#xff…

新科技辅助器具赋能视障生活:让盲人出行融入日常

随着科技日新月异的发展,一款名为蝙蝠避障专为改善盲人日常生活的盲人日常生活辅助器具应运而生,它通过巧妙整合实时避障与拍照识别功能,成功改变了盲人朋友们的生活格局,为他们提供了更为便捷、高效的生活体验。 这款非同…

数据结构——二叉树的顺序存储(堆)(C++实现)

数据结构——二叉树的顺序存储(堆)(C实现) 二叉树可以顺序存储的前提堆的定义堆的分类大根堆小根堆 整体结构把握两种调整算法向上调整算法递归版本 非递归版本向下调整算法非递归版本 向上调整算法和向下调整算法的比较 我们接着…

1. 房屋租赁管理系统(Java项目 springboot/vue)

1.此系统的受众 1.1 在校学习的学生,可用于日常学习使用或是毕业设计使用 1.2 毕业一到两年的开发人员,用于锻炼自己的独立功能模块设计能力,增强代码编写能力。 1.3 亦可以部署为商化项目使用。 2. 技术栈 jdk8springbootvue2mysq5.7&8…

论文阅读之MMSD2.0: Towards a Reliable Multi-modal Sarcasm Detection System

文章目录 论文地址主要内容主要贡献模型图技术细节数据集改进多视图CLIP框架文本视图图像视图图像-文本交互视图 实验结果 论文地址 https://arxiv.org/pdf/2307.07135 主要内容 这篇文章介绍了一个名为MMSD2.0的多模态讽刺检测系统的构建,旨在提高现有讽刺检测系…

Amazon云计算AWS之[5]关系数据库服务RDS

文章目录 RDS的基本原理主从备份和下读写分离 RDS的使用 RDS的基本原理 Amazon RDS(Amazon Relational Database Service) 将MySQL数据库移植到集群中,在一定的范围内解决了关系数据库的可扩展性问题。 MySQL集群方式采用Share-Nothing架构。每台数据库服务器都是…

JavaEE——介绍 HTTPServlet 三部分使用与 cookie 和 session 的阐述

文章目录 一、HTTPServlet介绍其中的关键 三个方法 二、HTTPServletRequest(处理请求)1.分块介绍方法作用get 为前缀的方法字段中 含有 getParameter 字段 的方法(前后端交互):字段中 含有 getHeader 字段 的方法: 2.解释前后端的交互过程3.使用 json 格…

【小迪安全2023】第59天:服务攻防-中间件安全CVE复现lSApacheTomcatNginx

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收…

RocketMQ快速入门:namesrv、broker、dashboard的作用及消息发送、消费流程(三)

0. 引言 接触rocketmq之后,大家首当其冲的就会发现需要安装3个组件:namesrv, broker, dashboard,其中dashboard也叫console,为选装。而这几个组件之前的关系是什么呢,消息发送和接收的过程是如何传递的呢,…

如何在 Visual Studio 中通过 NuGet 添加包

在安装之前要先确定Nuget的包源是否有问题。 Visual Studio中怎样更改Nuget程序包源-CSDN博客 1.图形界面安装 打开您的项目,并在解决方案资源管理器中选择您的项目。单击“项目”菜单,然后选择“管理 NuGet 程序包”选项。在“NuGet 包管理器”窗口中…

Swift 中的 Range 运算符

在 Swift 中,Range 运算符是一种强大的工具,用于表示一系列连续的数值或字符。Range 可以用于循环、数组切片、条件语句等场景,为我们提供了方便的方法来处理数据集合。 闭区间运算符 a...b 闭区间运算符 a...b 用于创建一个从起始值到结束…

在虚拟环境中找到Qt Designer

Pyqt5中找到Qt Designer 安装Pyqt5和Qt Designer: pip install pyqt5-tools 假设Python的虚拟环境名为:d2l ,虚拟环境在d2l文件夹中 D:\Software\d2l\Lib\site-packages\qt5_applications\Qt\bin 双击Qt designer启动 Pyside2中找到Qt Designer d2l是虚拟环境…

NDK 基础(五)—— C++ 高级特性2

1、左值右值 在 C 中,左值(lvalue)和右值(rvalue)是用于描述表达式的术语,它们与赋值操作和内存中对象的生命周期有关。 **左值(lvalue)**是指可以出现在赋值操作符左侧的表达式&a…

【Vue3+Tres 三维开发】02-Debug

预览 介绍 Debug 这里主要是讲在三维中的调试,同以前threejs中使用的lil-gui类似,TRESJS也提供了一套可视化参数调试的插件。使用方式和之前的组件相似。 使用 通过导入useTweakPane 即可 import { useTweakPane, OrbitControls } from "@tresjs/cientos"const {…