JavaScript-DOM-笔记

1.JavaScript的组成
1)ECMAScript
ECMAScript规定了JS的编程语法和基础核心知识,如语法、类型等等。
2)DOM——文档对象模型
文档对象模型可以对页面上的各种元素进行操作(大小、位置、颜色等)
3)BOM——浏览器对象模型
浏览器对象模型可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

DOM和BOM就是网页API,其中包含了预先定义好的工具函数,直接拿来使用即可
DOM中:
文档: 一个页面就是一个文档 ----- html
节点: 文档中的所有内容 ---- 标签、属性、文本
元素: 标签
文档中包含节点,节点包含元素

2.根据id名、类名、标签名获取元素
1)根据id名获取元素    document.getElementById('id名')
id是唯一的 获取的就是元素
2)根据类名获取元素    document.getElementsByClassName('类名')
类名可以重复。使用类名获取的结果是一个伪数组,获取具体的元素需要使用下标
document.getElementsByClassName('类名')[下标]
3)根据标签名获取元素   document.getElementsByTagName('标签名')
标签名可以重复。使用标签名获取的结果是一个伪数组,获取具体的元素需要使用下标
document.getElementsByTagName('标签名')[下标]

3.使用选择器获取元素
通配符选择器、id选择器、类选择器、标签选择器、后代选择器、子元素选择器
id选择器:#id名 类选择器:.类名 标签选择器:标签名
document.querySelector('选择器'): 根据选择器,只获取第一个
document.querySelectorAll('选择器'):根据选择器,获取所有 --- 伪数组 使用下标获取具体元素

4.获取特殊元素
获取body : document.body
获取html :  document.documentElement

5.事件三要素
1)事件源: 操作了谁
2)事件类型: 干了什么事
3)事件处理函数: 做出的反应

6.绑定事件的三步
1)获取事件源
2)确定事件类型
3)绑定事件处理函数 元素.事件类型 = function(){ 代码 }

7.常见的事件类型
onclick   鼠标点击左键触发
onfocus  获取鼠标焦点触发
onblur  失去鼠标焦点触发
onmouseenter/onmouseleave   鼠标移入/移出某元素触发
onmouseover/onmouseout   鼠标悬停/离开某元素触发
onmousemove    鼠标移动触发
onmousedown/onmouseup    鼠标按下/弹起触发

8.获取、修改元素的文本内容
1)获取:元素.innerText
2)修改:元素.innerText = '值'

9.获取、修改元素内部html结构
1)获取:元素.innerHTML
2)修改:元素.innerHTML = '值'

10.获取、修改元素的属性
1)获取:元素.属性名
2)修改:元素.属性名 = '值'


11.表单元素的特殊属性
input标签中的特殊属性type:
        text:文本框 password:密码框 radio:单选按钮 checkbox:复选框
特殊属性:
        disabled(禁用)、checked(选中)、selected(下拉菜单被选中),readonly(只读),这些属性的值是布尔型,不能加引号

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

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

相关文章

PaddleSeg的训练与测试推理全流程(超级详细)

LeNet模型量化 参考文档一.下载项目地址:https://gitee.com/paddlepaddle/PaddleSeg/tree/release%2F2.5/特别注意下载版本: 二.paddlepaddle-gpu安装1.环境安装参考文档:https://gitee.com/paddlepaddle/PaddleSeg/blob/release/2.8/docs/in…

JetPack组件学习ViewModel

目录 ViewModel的使用 简要分析 问答 如何实现旋转屏幕数据保持不变? 和之前的Presenter有什么区别 ViewModel的使用 1.需要先创建ViewModel类,继承自ViewModel重写onclear方法,使得页面销毁的时候能够走到自定义的onClear方法中 clas…

ALIENWARE:卓越游戏体验,源自创新基因

美国拉斯维加斯当地时间1月9日,CES 2024在万众期盼中如约而至。 作为全球消费电子领域一年一度的盛宴和行业风向标,CES 2024汇聚了来自全球的众多消费电子企业以及令人目不暇接的最新科技产品,因而受到了全球广大消费者的密切关注。 众所周知…

日期类的实现|运算符重载的复用

前言 通过前面C入门与类与对象的学习,今天我们将运用所学的知识点完成一个Date类。 本节目标 运用所学知识完成Date类。详细讲解运算符各种重载。理解运算符重载的复用。 一、Date类的六个默认成员函数 六个成员函数,Date类只需要自己实现构造函数即可…

数据库mysql no.4

1.流程控制函数 ①if(条件表达式,表达式1,表达式2): 如果条件表达式成立,返回表达式1,否则返回表达式2 case情况1 case 变量或表达式或字段 when 常量1 then 值1 when 常量2 then 值2 ... else 值n end case情况2…

新一代工厂融合广播系统,助力工业行业可持续发展

在当今高度竞争的工业环境中,工厂的运营效率和生产安全至关重要。为了实现这一目标,新一代工厂融合广播系统应运而生,将指挥中心、值班中心、融合通信调度主机、厂区终端和防爆话机紧密连接,构建了一个全面、高效的通信网络。 系统…

Linux进程管理、ps命令、kill命令

每一个程序在运行的时候都会被操作系统注册为系统中的一个进程 补充一下操作系统的内容: 进程实体(又称进程映像):程序段、相关数据段、PCB三部分构成 进程是进程实体的运行过程,是系统进行资源分配的一个独立单位 …

团结引擎的安装

团结引擎有多种方式可以安装,具体可以参考团结引擎官方文档,这里我们使用最简单的安装方式,通过团结Hub来安装。 1. 安装 Tuanjie Hub 进入团结引擎官网,点击右上角的【下载Unity】,进入下载界面,选择“下载…

C++——冒泡排序

作用:最常用的排序算法,对数组内元素进行排序 1,比较相邻的元素,如果第一个比第二个大,就交换他们两个。 2,对每一对相邻元素做同样的工作,执行完毕后,找到第一个最大值。 3&…

摘:国六排放法规下的重型车车载终端的革新

系列文章目录 文章目录 系列文章目录一、国六排放法规下的重型车车载终端的革新二、使用步骤1.引入库2.读入数据 一、国六排放法规下的重型车车载终端的革新 添加链接描述 ascii码 二、使用步骤 1.引入库 代码如下(示例): import numpy a…

并发编程(六)

1、HashMap、HashTable、ConcurrentHashMap的比较 HashMap、HashTable和ConcurrentHashMap是Java中的几种重要的数据结构,它们都可以用来存储键值对。但是,它们之间存在一些重要的差异,尤其是在线程安全和性能方面。以下是它们之间的比较&am…

Python 基础(八):函数

1 简介 简单来说函数就是一段实现特定功能的代码,使用函数可以提高代码的重复利用率。Python 中有很多内置函数,比如之前常用的 print 函数,当内置函数不足以满足我们的需求时,我们还可以自定义函数。 2 自定义函数 Python 使用…

JDK21和 Flowable 7.0.0

JDK21和 Flowable 7.0.0 一.Flowable二.项目搭建1.依赖包2.数据库3.资源文件1.YML配置文件2.Drools kbase3.Drools rule4.DMN 决策表5.BPMN 流文件 4.BPMN 流程图绘制插件5.测试代码1.启动类2.Flowable 配置3.Camel 配置1.Camel 配置2.Camel Router 定义 4.扩展类监听1.外部工作…

SOP-8 SOIC-8 SO-8封装区别

学习自记: SO8和SO-8封装是相同的,SOP8和SOP-8封装也是相同的。SO8封装与SOP8封装的尺寸稍有差异,但差别不大。在 PCB 板上,这两种封装之间没有区别。 SOP也是一种很常见的封装形式,始于70年代末期。SOP封装的应用范围…

docker compose安装gitlab

环境 查看GitLab镜像 docker search gitlab 拉取GitLab镜像 docker pull gitlab/gitlab-ce 准备gitlab-docker.yml文件 version: 3.1 services:gitlab:image: gitlab/gitlab-ce:latestcontainer_name: gitlabrestart: alwaysenvironment:GITLAB_OMNIBUS_CONFIG: |external_url…

在Windows Server 2012中部署war项目

目录 一.安装jdk 二.安装tomcat 三.安装MySQL 四.部署项目 好啦今天就到这了,希望帮到你了哦 前言:具体步骤: 1.安装JDK: 2.安装tomcat: 3.安装MySQL: 4.部署项目: 一.安装jdk 将所需文件放…

苍穹外卖学习----出错记录

1.微信开发者工具遇到的问题: 1.1appid消失报错: {errMsg: login:fail 系统错误,错误码:41002,appid missing [20240112 16:44:02][undefined]} 1.2解决方式: appid可在微信开发者官网 登录账号后在开发栏 找到 复制后按以下步骤粘贴即…

2024.1.4力扣每日一题——被列覆盖的最多行数

2024.1.4 题目来源我的题解方法一 回溯位运算优化 题目来源 力扣每日一题;题序:2397 我的题解 方法一 回溯位运算优化 这道题一看就会想到使用回溯法,但是采用回溯法后如何判断有多少行被覆盖,直接计算矩阵时间复杂度较高&…

怎么将文件批量重命名为不同名称?

怎么将文件批量重命名为不同名称?有许多情况下可以考虑对文件进行批量重命名为不同名称,文件分类和整理:当您需要对一组文件进行分类、整理或重新组织时,可以考虑将它们批量重命名为不同的名称。这有助于更好地组织文件并使其更易…

提升测试多样性,揭秘Pytest插件pytest-randomly

大家可能知道在Pytest测试生态中,插件扮演着不可或缺的角色,为开发者提供了丰富的功能和工具。其中,pytest-randomly 插件以其能够引入随机性的特性而备受欢迎。本文将深入探讨 pytest-randomly 插件的应用,以及如何通过引入随机性…