Dom获取属性操作

目录

1. 基本认知

1.1 目的和内容

1.2 什么是DOM

1.3 DOM对象

1.4 DOM树

2. 获取DOM元素对象

2.1 选择匹配到的第一个元素

2.2 选择匹配到的多个元素

2.3 其他获取DOM元素方法

3. 操作元素内容

3.1 元素对象.innerText 属性

3.2 元素对象.innerHTML 属性

4. 操作元素属性

4.1 操作元素常用属性

4.2 操作元素样式属性

4.3 操作表单元素属性

4.4 自定义属性

5. 定时器-间歇函数


1. 基本认知

1.1 目的和内容
目的: 就是使用 JS 去操作 html网页 和 浏览器,实现各种网页特效。
内容: DOM (文档对象模型)、 BOM (浏览器对象模型)

1.2 什么是DOM
  • DOM 是 Document Object Model——文档对象模型 的简称
  • DOM 是 W3C组织推荐的一套操作文档结构、样式和内容的技术标准(所有的浏览器都遵循了)
  • 一句话概括:DOM是浏览器提供的一套专门用来 操作网页 的功能

DOM作用:开发网页内容特效和实现用户交互

1.3 DOM对象
DOM技术的核心
  • 以对象的方式描述整个网页,定义了表示和修改网页内容所需的对象
  • 网页中的任何内容都可以用对象来表示,操作这个对象会自动作用到网页身上
    • 整个html网页用 文档对象 来表示
    • 网页中的标签用 标签对象(元素对象)来表示

DOM的核心思想:把网页内容当做 对象 来处理

DOM对象:浏览器根据html标签生成的 JS对象
  • 标签上的所有属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

document 对象:

  • DOM 里表示整个网页(整个文档)的对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的
    • 例:document.write()
  • 网页所有内容都在document里面
1.4 DOM树
DOM树是什么
  • DOM技术将 HTML 文档和标签映射成对象后,形成了类似“倒着的大树”的组织结构
  • HTML文档的树状结构,我们称之为 文档树 DOM 树
DOM树的作用
  • DOM文档树直观的体现了标签与标签之间的关系
  • 通过DOM树可以获取到网页上的任意内容

2. 获取DOM元素对象

2.1 选择匹配到的第一个元素
语法:document.querySelector("css选择器")
参数:包含一个或多个有效的CSS选择器 字符串
返回值: CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。 如果没有匹配到,则返回null。
技术文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
2.2 选择匹配到的多个元素
语法:document.querySelectorAll("css选择器")
参数:包含一个或多个有效的CSS选择器 字符串
返回值:CSS选择器匹配的 NodeList 元素对象集合( 伪数组
例如: document.querySelectorAll("ul li")
得到的是一个 伪数组
  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象,则需要遍历(for)的方式获得。
注意: 哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个 伪数组 ,里面只有一个元素
2.3 其他获取DOM元素方法

3. 操作元素内容

3.1 元素对象.innerText 属性
  • 元素对象的innerText属性对应着标签的内容
  • 通过innerText属性,就可以获取/更新标签的内容
  • 纯文本,不解析标签

举例:

3.2 元素对象.innerHTML 属性
  • 元素对象的innerHTML属性对应着标签的内容
  • 通过innerHTML属性,就可以获取/更新标签的内容
  • 会解析标签,多标签建议使用模板字符

4. 操作元素属性

4.1 操作元素常用属性
通过 JS 设置/修改标签元素的属性,比如通过 src更换图片
最常见的属性比如: href、title、src 等
语法:对象.属性 = 值
举例:

4.2 操作元素样式属性
通过 style 属性操作CSS
语法:对象.style.样式属性 = 值
举例:

操作类名(className) 操作CSS
如果要修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过修改标签的类名实现。
语法:元素.className = "active"  // active 是一个css类名
注意:
  1. 由于class是关键字,所以使用className代替
  2. className是使用新值旧值, 如果需要添加一个类,注意保留之前的类名

通过 classList 操作类控制CSS

使用className 会覆盖以前的类名,我们可以通过classList方式 追加 删除 类名
语法:

4.3 操作表单元素属性
  • 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
  • 表单标签的大部分属性的操作,和普通标签属性的操作没有任何区别

获取:DOM对象.属性名

设置:DOM对象.属性名 = 新值
举例:

  • 表单标签有些属性是表示状态的,比如: disabled、checked、selected
  • 状态属性获得的是:布尔值。
  • 修改状态属性时,使用布尔值修改,为true 代表添加了该属性,false 代表移除了该属性
4.4 自定义属性
标准属性: 标签天生自带的属性,比如class id title等, 可以直接使用“.属性名”操作
自定义属性:
  • html5中推出来了data-* 格式的自定义属性(在标签上记录一些信息
  • 给标签添加自定义属性一律以data- 开头
  • 在DOM对象上以dataset对象方式获取

举例:

5. 定时器-间歇函数

1. 开启定时器

作用:每隔一段时间调用这个函数,间隔时间单位是毫秒
举例:

2. 关闭定时器

一般不会刚创建就停止,而是满足一定条件再停止
举例:

注意:

  • 函数名字不需要加括号
  • 定时器返回的是一个id数字

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

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

相关文章

缓存分享(1)——Guava Cache原理及最佳实践

Guava Cache原理及最佳实践 1. Guava Cache是什么1.1 简介1.2 核心功能1.3 适用场景 2. Guava Cache的使用2.1 创建LoadingCache缓存2.2 创建CallableCache缓存 缓存的种类有很多,需要根据不同的应用场景来选择不同的cache,比如分布式缓存如redis、memca…

音视频文件存储

特殊格式文件(视频、声音等) 在数据库中的存储方式 YouTube 是如何保存巨量视频文件的? 网站视频存储方案 云计算 - 对象存储服务OSS技术全解 逐步更新

js,javascript数组方法reduceRight(),reverse(),shift(),slice(),some()(2024-05-01)

目录 1、reduceRight()方法 2、reverse()方法 3、shift()方法 4、slice()方法 5、some()方法 1、reduceRight()方法 reduceRight() 方法将数组缩减为单个值。 reduceRight() 方法为数组的每个值(从右到左)执行提供的函数。 函数的返回值存储在累…

设计模式之装饰者模式DecoratorPattern(四)

一、概述 装饰者模式(Decorator Pattern)是一种用于动态地给一个对象添加一些额外的职责的设计模式。就增加功能来说,装饰者模式相比生成子类更为灵活。装饰者模式是一种对象结构型模式。 装饰者模式可以在不改变一个对象本身功能的基础上增…

linux dma的使用

设备树配置 驱动代码 static void bcm2835_dma_init(struct spi_master *master, struct device *dev) { struct dma_slave_config slave_config; const __be32 *addr; dma_addr_t dma_reg_base; int ret; /* base address in dma-space */ addr of_get_address(master->de…

基于 React 的图形验证码插件

react-captcha-code NPM 地址 : react-captcha-code - npm npm install react-captcha-code --save 如下我自己的封装: import Captcha from "react-captcha-code";type CaptchaType {captchaChange: (captchaInfo: string) > void;code…

目前全球各类遥感卫星详细介绍

一、高分一号 高分一号(GF-1)是中国高分辨率对地观测系统重大专项(简称高分专项)的第一颗卫星。“高分专项”于2010年5月全面启动,计划到2020年建成中国自主的陆地、大气和海洋观测系统。 高分一号(GF-1&…

React的useEffect

概念:useEffect是一个React Hook函数,组件渲染之后执行的函数 参数1是一个函数,可以把它叫做副作用函数,在函数内部可以放置要执行的操作参数2是一个数组(可选参),在数组里放置依赖项&#x…

Linux系统中搭建Mosquitto MQTT服务并实现远程访问本地消息代理进行通信

文章目录 1. Linux 搭建 Mosquitto2. Linux 安装Cpolar3. 创建MQTT服务公网连接地址4. 客户端远程连接MQTT服务5. 代码调用MQTT服务6. 固定连接TCP公网地址7. 固定地址连接测试 今天和大家分享一下如何在Linux系统中搭建Mosquitto MQTT协议消息服务端,并结合Cpolar内网穿透工具…

使用 Python 和 OpenCV 进行实时目标检测的详解

使用到的模型文件我已经上传了,但是不知道能否通过审核,无法通过审核的话,就只能 靠大家自己发挥实力了,^_^ 目录 简介 代码介绍 代码拆解讲解 1.首先,让我们导入需要用到的库: 2.然后,设…

ts封装浏览器indexedDB

IndexedDB 的工具函数集合,主要包括以下功能: openStore: 打开指定名称的 IndexedDB 数据库,并创建或更新指定名称的对象存储空间。接受一个包含数据库名称、存储空间名称、键路径和可选索引数组的参数对象,并返回一个 Promise&am…

论文辅助笔记:TEMPO 之 utils.py

0 导入库 from typing import Tuple import random import numpy as np import torch from statsmodels.tsa.seasonal import STL 1 EarlyStopping 提供了一个早停机制,用于在模型训练过程中监控验证集上的损失如果损失停止改进,则停止训练 1.1 __in…

【C语言】指针篇- 深度解析Sizeof和Strlen:热门面试题探究(5/5)

🌈个人主页:是店小二呀 🌈C语言笔记专栏:C语言笔记 🌈C笔记专栏: C笔记 🌈喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、简单介绍Sizeof和Strlen1.1 Sizeof1.2 Strlen函数1.3 Sie…

快速建站介绍

随着在线业务和电子商务的规模不断扩大,初创公司、个人网站和小型企业都需要快速地搭建自己的网站,以便更好地展示自己、推广产品和服务,并实现在线交易。快速建站已成为在线业务发展的一种主流方式,因为它能够快速地创建一个响应…

uniapp 自定义 App启动图

由于uniapp默认的启动界面太过普通 所以需要自定义个启动图 普通的图片不可以过不了苹果的审核 所以使用storyboard启动图 生成 storyboard 的网站:初雪云-提供一站式App上传发布解决方案

Java学习第02天-类型转换、运算符

目录 类型转换 自动类型转换 表达式的自动类型转换 强制类型转换 运算符 基本运算符 案例解答 连接字符串 自增自减运算符 面试习题 赋值运算符 比较运算符 逻辑运算符 基本逻辑运算符 短路逻辑运算符 三元运算符 基础知识 拓展案例 运算符优先级 读取用户…

UNeXt: a Low-Dose CT denoising UNet model with the modified ConvNeXt block

UNeXt:采用改进的ConvNeXt块的低剂量CT去噪UNet模型 论文链接:https://ieeexplore.ieee.org/document/10095645 项目链接:没找到 Abstract 近几十年来,临床医生广泛使用计算机断层扫描(CT)进行医学诊断。医疗辐射有潜在危险&am…

数据结构与算法-构建二叉树

构建二叉树 已知前序遍历与中序遍历或已知后序遍历和中序遍历可以构建唯一的二叉树 根据前序遍历与中序遍历建树 class Tree_Node():def __init__(self,val):self.val valself.left Noneself.right None # 构建二叉树 # 根据前序遍历与中序遍历构建二叉树 # 前序遍历[3,9…

77、贪心-买卖股票的最佳时机

思路 具体会导致全局最优,这里就可以使用贪心算法。方式如下: 遍历每一位元素找出当前元素最佳卖出是收益是多少。然后依次获取最大值,就是全局最大值。 这里可以做一个辅助数组:右侧最大数组,求右侧最大数组就要从…

ADS1.2中的代码debug的时候不出来代码的解决办法

我总觉得ADS1.2这个软件挺奇怪的,一阵一阵的,我遇到了很多奇怪的问题,这里记录一下吧。 1、新建文件的时候,没法选择这个add to project 解决办法:如果没有已存在的.mcp文件,就先新建project,然…