JS-DOM树和DOM对象

作用和分类

作用:就是使用JS去操作html和浏览器

分类:DOM(文档对象模型)、BOM(浏览器对象模型)

什么是DOM

DOM(Document Object Model--文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API

白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能

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

DOM树

定义:将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM树,描述网页内容关系的名词

作用:文档树直观的体现了标签与标签之间的关系

DOM对象(重要)

DOM对象

浏览器根据html标签生成的JS对象

1)所有的标签属性都可以在这个对象上面找到

2)修改这个对象的属性会自动映射到标签身上

console.dir()//打印对象,获取的信息比较清晰

DOM的核心思想

把网页内容当作对象来处理

document对象

1)是DOM里提供的一个对象

2)所以它提供的属性和方法都是用来访问和操作网页内容的

3)网页所有内容都在document里面

获取DOM元素

根据css选择器来获取DOM元素(重点)

1.选择匹配的第一个元素

document.querySelector('css选择器')

参数:包含一个或多个有效的css选择器字符串

返回值:css选择器匹配的第一个元素,一个HTMLElement对象;如果没有匹配到,则返回null

可以直接操作修改

2.选择匹配的全部元素

document.querySelectorAll('css选择器')

参数:包含一个或多个有效的css选择器字符串

返回值:css选择器匹配的NodeList对象集合,得到的是一个伪数组

1)有长度有索引号的数组

2)但是没有pop()、push()等数组方法

不能直接修改,只能通过遍历(for)的方式一次给里面的元素做修改,类似数组方式获取

注意:哪怕只有一个元素,通过querySelectorAll()获取过来的也是一个伪数组,里面只有一个元素而已

其他获取DOM元素方法(了解)

//根据id获取一个元素
document.getElementById('id名')
//根据标签获取一类元素
document.getElementByTagName('标签名')
//根据类名获取一类元素
document.getElementByClassName('class名')

操作元素

操作元素内容

元素.innerText属性

将文本内容添加/更新到任意标签位置

显示纯文本,不解析标签

元素.innerHTML属性

将文本内容添加/更新到任意标签位置

会解析标签,多标签建议使用模板字符

纠结到底用谁,可以选择innerHTML

操作元素属性

操作元素常用属性

可以通过JS设置/修改标签元素属性,比如通过src更换图片

最常见的属性比如:href、title、src等

对象.属性=值

控制元素样式属性

可以通过JS设置/修改标签元素的样式属性

1)比如通过轮播图小圆点自动更换颜色样式

2)点击按钮可以滚动图片,这是移动的图片的位置left等等

学习路径:

1.通过style属性操作CSS

对象.style.样式属性='值'

注意:

1)赋值的时候,需要的时候不要忘记加css单位

2)如果样式属性名带有-连接符如background-color时,要使用小驼峰命名法改为backgroundColor

标签选择body,因为body是唯一的标签,可以直接写document.body.style

2.操作类名(className)操作CSS

如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式,在style中编写一个新类并写入样式

元素.className='类名'

注意:

1)由于class是关键字,所以使用className去代替

2)className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名

元素.className='类名 类名'

3.通过classList操作类控制CSS(H5)

为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名不影响以前类名

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

操作表单元素属性

自定义属性

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

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

相关文章

动手搓一个kubernetes管理平台(1)-需求和框架

先拍个脑袋 市面上对于kubernetes集群的管理平台其实不算少,但常用的就那么几个,比如厚重的rancher,比如老而弥坚的kube-dashboard,以及集成了很多其他功能的kubeSphere等,但和其他开源项目一样,为了满足大…

使用Python编写一个渗透测试探测工具

本篇将会涉及: 资源探测一个有用的字典资源第一个暴力探测器 资源探测 资源探测在渗透测试中还是属于资源的映射和信息的收集阶段。 主要有以下三个类型: 字典攻击暴力破解模糊测试 字典攻击,在破解密码或密钥的时候,通过自定…

python 解析

list(pd.DataFrame) # 所有列名切片:print("显式 切片:\n", df.loc[:, "number":"sum"]) 所有行,列是从number 到sum ,前闭后开print("隐式 切片:\n", df.iloc[:, 1:3]) # 结果和上面一样转化成字典…

Spark---RDD依赖关系

文章目录 1.1 RDD依赖关系1.2 血缘关系1.3 依赖关系分类1.3.1 窄依赖1.3.2 宽依赖 1.4 RDD阶段划分和任务划分1.4.1 RDD阶段划分1.4.2 RDD任务划分 1.1 RDD依赖关系 在Spark中,一个RDD的形成依赖于另一个RDD,则称这两个RDD具有依赖关系(一般指相邻的两个…

创始人记|2023「年终总结」暨 WorkfineV6版本发布

大家好,我是Workfine黄坤,很高兴能够再次为大家进行分享。衷心感谢大家一直以来对我们的厚爱和支持。新的一年,祝愿大家财源滚滚,身体健康,阖家幸福。 这是我们创业的第七个年头,进入这一行也有整整十年。…

GO自研微服务框架-中间件

一.中间件 中间件的作用是给应用添加一些额外的功能,但是并不会影响原有应用的编码方式,想用的时候直接添加,不想用可以很轻松的去除,做到所谓的可插拔。 中间件的实现位置在哪里? 不能耦合在用户的代码中需要独立存…

减肥或者运动真的能改变面相吗?

减肥或运动真的能改变面相吗? 在我们日常生活中,经常可以听到一些关于面相的说法,比如“胖的人更有福气”、“瘦的人更有灵气”等等。那么,减肥或运动是否真的能够改变一个人的面相呢?下面我们就来探讨一下这个问题。…

高精度磁导航传感器MGS系列RS232|RS485|CANBUS通讯连线方法

高精度磁导航传感器MGS系列,包含:CNS-MGS-080N、CNS-MGS-160N等,具有1mm的检测精度,特别适应于⾼精度磁条导航。利⽤检测磁场相对位置来进⾏AGV的辅助定位对接,获得更⾼的导航、定位、驻⻋精度。 MGS系列磁导航传感器⽀…

多臂老虎机 “Multi-armed Bandits”

将强化学习与机器学习、深度学习区分开的最重要的特征为:它通过训练中信息来评估所采取的动作,而不是给出正确的动作进行指导,这极大地促进了寻找更优动作的需求。 1、多臂老虎机(Multi-armed Bandits)问题 赌场的老虎…

阿里云服务器选哪个好(各自的优势区别)

阿里云服务器该怎么选? 一:99元一年,每天花费0.27元 点击 实惠好用,祝从此链接购买的用户天天好事不断! 1.想省点钱的个人开发者建议选经济型e实例(2核2G,3M网络带宽,40G云盘) 2.可以用来干什么? 搭建中小…

系统语言德语时浮点数转化问题

原因 游戏上线后,玩家反馈系统语言为德语时会有问题,经排查测试,发现是德语的浮点数转化,也就是float.parser对于德语来说会有问题。 在中国和英国,表示小数是用 小数点,即:0.123。但是在德国…

2024 极术通讯-“周易”NPU与飞桨完成II 级兼容性测试,助力实现多样化AI部署

导读:极术社区推出极术通讯,引入行业媒体和技术社区、咨询机构优质内容,定期分享产业技术趋势与市场应用热点。 芯方向 Helium 技术讲堂 | 循环缓冲区的使用 当人工智能 (AI) 下沉到各式各样的应用当中,作为市场上最大量的物联网…

聚酰亚胺PI的特性有哪些?UV胶水能够粘接聚酰亚胺PI吗?又有哪些优势呢?

聚酰亚胺(Polyimide,PI)是一种高性能的聚合物材料,具有许多优异的特性。以下是聚酰亚胺的主要特性: 1. 高耐热性:聚酰亚胺的玻璃化转变温度和熔点都很高,可在非常高的温度下工作,其长…

Python 获取ResponseContent的文件名

通过网络请求下载的文件,有些时候不想重命名可以直接使用网页所返回的文件名 需要用到两个库 uuid 负责生成随机的数 unquote 负责解析编码后的字符 分了两种情况进行处理 1.找得到header 里面文件名 直接使用文件所返回的文件名 2.找不到header里面的文件…

leecode2719 | 统计整数数目

给你两个数字字符串 num1 和 num2 &#xff0c;以及两个整数 max_sum 和 min_sum 。如果一个整数 x 满足以下条件&#xff0c;我们称它是一个好整数&#xff1a; num1 < x < num2 min_sum < digit_sum(x) < max_sum. 请你返回好整数的数目。答案可能很大&#xff0…

极智芯 | 解读自动驾驶芯片之高通骁龙Ride系列

欢迎关注我的公众号「极智视界」,获取我的更多技术分享 大家好,我是极智视界,本文分享一下 解读自动驾驶芯片之高通骁龙Ride系列。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 对于自动驾驶芯片,之…

抖音弹幕玩法汉字找不同让鼠标指针自动漂浮的实现原理及代码

如下图&#xff0c;抖音直播间弹幕互动玩法&#xff0c;为了增强用户的视觉感知体验&#xff0c;在里面加了一个鼠标&#xff0c;来让用户感知到自己在操作。下一节我们将背景音乐也给加上去。 我们实现的方案是用anime.js动画&#xff0c;来让一个图片在指定区域范围内随机漂浮…

PDF文件中字体乱码的一种简单的处理方法

要解决问题先得碰到问题&#xff0c;碰到问题就迈出了解决问题的关键一步。 问题PDF文件的下载链接 这文件用Acrobat打开&#xff0c;无法搜索文本&#xff0c;复制文本出来也都是乱码。但用sumatra PDF打开就不存在这个问题&#xff01; 用Acrobat的印前检查解决。prefligh…

解决kubelet报failed to get imageFs info: non-existent label \“docker-images\“

问题&#xff1a; 一环境主机重启后&#xff0c;查看kubelet日志经常有大量无法回收镜像文件报错&#xff0c;会导致kubelet的pleg不健康&#xff0c;从而导致kubelet发生重启。报错如下&#xff1a; 解决办法 解决方法一&#xff1a; systemctl stop docker systemctl stop …

解锁Python神器vars:让你的代码瞬间脱颖而出!

vars()函数是一个内置函数&#xff0c;用于返回对象的__字典__&#xff0c;其中包含对象的__属性__。它适用于模块、类和实例对象&#xff0c;为你提供了访问对象属性的便捷方式。 1. vars() 函数概述 vars()函数有两种使用方式&#xff1a; 不带参数&#xff1a;返回当前作…