DOM操作

DOM

DOM --> Document Object Model --> 文档对象模型 -->通过js来操作网页里的内容

DOM树–>一个网页文档里面的所有部分(图片 文字 样式)在html底层中,是以树形结构保存 树里面每个分支终点node(节点) 每个节点都属于一个对象(属性/方法)

网页的内容是以树形结构的方式在程序中保存 每个元素都是一个对象 都有自己对应的属性和方法

document对象是DOM树的根茎 是所有节点的根节点,通过document就可以访问html里所有的内容

操作网页元素分为两步:
1.选中 找出元素
2.对元素实施操作

DOM元素选中方法

Element – 元素
注意:语法基本都是小驼峰
1.通过id获取到元素
document.getElementById() //通过id名获取元素

2.通过class获取元素
document.getElementsByClassName() //通过类名获取元素

3.通过标签名获取元素
document.getElementsByTagName() //通过标签名获取元素

获取的元素默认值HTMLCollection.类似于数组 但是不属于数组
同:数据有下标的概念 / 数据可以被遍历
异:他不可以使用数组的方法

基于这个特性,所以如果直接对伪数组进行dom操作是无效的,因为我们要修改的不是这个伪数组 而是这个伪数组里的元素 所以要添加下标 来访问对对应元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选中方式</title>
</head>
<body>
    <div id="box1">多喝水</div>
    <div class="box">123</div>
    <div class="box">456</div>
    <div class="bxo">789</div>

    <script>
        //通过id名获取
        let box2=document.getElementById('box1')
        //查看元素文本
        console.log(box1.innerText)
        box1.innerText = '多喝肥宅快乐水'

        //通过class名获取
        let box = document.getElementsByClassName('box')
        console.log(box,typeof box)
        box[0].innerText='早安'
        box[1].innerText='午安'
        
        for(let i = 0; i<box.length;i++){
            box[1].innerText = `多喝热水,这是第${i}`
        }

        //通过标签名获取
        let p = document.getElementsByTagName(`p`)
        p[0].innerText = '西北锤王'
    </script>
</body>
</html>

DOM操作文本内容

innerHTML: 读取/设置元素里的文本内容 (识别标签语法)

innerText: 读取/设置元素里的文本内容 (不识别标签语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>

    <script>
        let box = document.getElementById('box')
        box.innerText = '六一快乐'

        let box2 = document.getElementsByClassName('box2')
        box2[0].innerHTML = '<i>六一儿童节</i>'
        box2[1].innerHTML = '<b>七一建军节</b>'
        box2[2].innerHTML = '<u>十一国庆节</u>'
        box2[3].innerHTML = '五一劳动节'
    </script>
</body>
</html>

DOM操作元素属性/样式

操作元素属性 --> 获取到元素后 通过元素名 . 的方式来进行操作

元素名.属性名 // 输出元素属性
元素名.属性名=xxx //修改元素属性

元素名.title //设置/获取到元素的标题
元素名.src //设置/获取元素的资源索引
元素名.className // 设置/获取元素的类名

操作元素样式 -->获取元素后 通过元素名.style.样式名 的方式进行操作
元素名.style.样式名 // 访问该元素的css样式

元素名.style.width // 访问元素的宽度样式
元素名.style.fontSize //访问元素的字体大小样式

如果css样式有(-)减号作为连接符 在用js写的时候 不要写连接符而是用驼峰命名法
font-size --> fontSize
background-color --> backgroundColor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p id="water">小明闹肚子</p>
    <div class="box"></div>

    <script>
        let water = document.getElementById('water')
        water.style.color='pink'
        water.style.fontSize='52px'

        let box = document.getElementsByClassName('box')[0]
        box.style.backgrouColor='#096'
        box.style.border='3px solid pink'
    </script>
</body>
</html>

交互事件(event)

事件指的是用户跟网页内容产生交互时进行的操作
按下键盘/单击鼠标/双击鼠标/输入文本
事件对象: 代表事件的状态,比如键盘按键的状态 鼠标的位置 鼠标按钮的状态
当这些事件触发时 就可以通过js的监听器来实时获取交互情况 并运行功能

就是说js可以监听到你是按下哪个键或者鼠标碰到了哪个位置然后运行对应的功能

事件流程:
1.获取事件对象 --> 会基于什么发生交互
2.绑定监听事件 -->
事件对象.监听事件 = function(){}
box.onclick = function(){功能代码}

onclick:点击
在获取到元素之后,可以使用this标签当当前的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="./img/0da299e5a52a437fdf1573b3beba451.jpg" alt="" id="pic" width="600" height="600">
    <button id="up"></button>
    <button id="down"></button>

    <script>
        let pic = document.getElementById('pic')
        let up = document.getElementById('up')
        let down = document.getElementById('down')

        //初始为第一张图
        let maxpic = 6,minpic = 1
        let now_pic = minpic

        down.onclick = function(){
            if(now_pic == maxpic)
            {now_pic == minpic}else{
            now_pic++}
            pic.scr = `./img/${now_pic}.jpg`
        }

        down.onclick = function(){
            if(now_pic == minpic)
            {now_pic == maxpic}else{
            now_pic--}
            pic.scr = `./img/${now_pic}.jpg`
        }
    </script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【P32】JMeter While 控制器(While Controller)

文章目录 一、While 控制器&#xff08;While Controller&#xff09;参数说明二、测试计划设计2.1、变量2.2、函数2.2.1、groovy脚本2.2.2、jex13脚本2.2.3、js脚本 一、While 控制器&#xff08;While Controller&#xff09;参数说明 可以对部分逻辑按变量条件进行循环迭代…

CentOS7编译安装Python3.10(含OpenSSL1.1.1安装),创建虚拟环境,运行Django项目(含sqlite版本报错)

文章目录 1、CentOS安装OpenSSL1.1.1&#xff08;前置环境&#xff09;2、CentOS安装 Python 3.103、创建虚拟环境4、运行Django项目 1、CentOS安装OpenSSL1.1.1&#xff08;前置环境&#xff09; 编译安装Python3.10时需要openssl1.1.1 查看当前版本 & 删除openssl1.0 …

代码随想录算法训练营第三十九天 | 力扣 62.不同路径, 63. 不同路径 II

62.不同路径 题目 62. 不同路径 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多…

C++数据结构:二叉树之一(数组存储)

文章目录 前言一、二叉树的基本定义二、二叉树的基本性质三、二叉树的存储&#xff08;数组&#xff09;总结原创文章&#xff0c;未经许可&#xff0c;禁止转载 前言 树是一种非线性数据结构&#xff0c;它由若干个节点和边组成。每个节点都有一个值&#xff0c;而边则表示节…

day17 - 用形状包围图像

在进行图像轮廓提取时&#xff0c;有的情况下不需要我们提取出精确的轮廓&#xff0c;只要提取出一个接近于轮廓的近似多边形&#xff0c;就可以满足后续的操作。 本期我们来学习如何通过设置参数来找出图像的近似多边形。 完成本期内容&#xff0c;你可以&#xff1a; 了解…

算法基础学习笔记——⑨C++STL使用技巧

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨CSTL简介 ✨CSTL使用技巧 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需要的看哈O(∩_∩)O&#xff0c;感谢大家的支持&#xff01; ✨CSTL简介 vector变长数组&#xff0c;倍增的思想//系统为…

STM32单片机(三)第一节:GPIO输出

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

驱动开发:内核读写内存浮点数

如前所述&#xff0c;在前几章内容中笔者简单介绍了内存读写的基本实现方式&#xff0c;这其中包括了CR3切换读写&#xff0c;MDL映射读写&#xff0c;内存拷贝读写&#xff0c;本章将在如前所述的读写函数进一步封装&#xff0c;并以此来实现驱动读写内存浮点数的目的。内存浮…

MyBatis操作数据库表和动态SQL的使用

目录 1.MyBatis开发环境的搭建和测试 2.MyBatis基本操作 2.0 准备工作 2.1 新增操作 2.2 删除、修改、查询操作 2.3 #{param} 和 ${param}的使用和区别 2.4 实体对象属性和数据库字段名称不同时如何映射&#xff1f; 3. MyBatis多表查询 3.0 准备工作 3.1 一对一的表…

ELK企业级日志分析系统

ELK概述 为什么要使用 ELK 日志主要包括系统日志、应用程序日志和安全日志。系统运维和开发人员可以通过日志了解服务器软硬件信息、检查配置过程中的错误及错误发生的原因。经常分析日志可以了解服务器的负荷&#xff0c;性能安全性&#xff0c;从而及时采取措施纠正错误。 往…

切比雪夫不等式,大数定律及极限定理。

一.切比雪夫不等式 1.定理 若随机变量X的期望EX和方差DX存在,则对任意ε > 0,有   P{ |X - EX| > ε } < DX/ε2 或 P{ |X - EX| < ε } > 1 - DX/ε2 2.解析定理 ①该定理对 X 服从什么分布不做要求&#xff0c;仅EX DX存在即可。 ②“| |” 由于X某次…

软件测试炸了,作为从业者,你做好准备了吗?

软件测试行业已经发生很大变化&#xff0c;你跟上变化了吗&#xff1f; 岗位少不可怕&#xff0c;要求越来越高也不可怕&#xff0c;可怕的是&#xff0c;软件测试行业已经发生巨变&#xff0c;而你却原地踏步&#xff01;目前一线大厂更多倾向于招收测试开发&#xff0c;或者…

自学网络安全(黑客),一般人我劝你还是算了吧

一、自学网络安全学习的误区和陷阱 1.不要试图先成为一名程序员&#xff08;以编程为基础的学习&#xff09;再开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而且…

torch.distributed.launch多卡多机

torch.distributed.launch命令介绍 我们在训练分布式时候&#xff0c;会使用到 torch.distributed.launch 可以通过命令&#xff0c;来打印该模块提供的可选参数 python -m torch.distributed.launch --help usage: launch.py [-h] [--nnodes NNODES] [--node_rank NODE_RANK]…

诚迈科技携智达诚远出席高通汽车技术与合作峰会

5月25日至26日&#xff0c;诚迈科技及旗下的智能汽车操作系统及中间件产品提供商智达诚远作为高通生态伙伴&#xff0c;亮相首届“高通汽车技术与合作峰会”&#xff0c;通过产品展示和主题演讲呈现了基于高通骁龙数字底盘的最新智能座舱技术成果&#xff0c;共同展望智能网联汽…

GcExcel v6.1 支持新的 ‘.sjs‘ 模板文件 ‘.xltx‘ 格式 Crack

GrapeCity Documents for Excel (GcExcel) v6.1 版本现已上线&#xff01;该版本支持新的 SpreadJS .sjs 文件格式和 Excel 模板文件 .xltx 格式。此外&#xff0c;GcExcel 支持更多的SpreadJS兼容性功能和对 GcDataViewer 的多项增强。看看下面的主要亮点。 导入/导出 Spread…

Revit幕墙:用幕墙巧做屋面瓦及如何快速幕墙?

一、Revit中用幕墙巧做屋面瓦 屋面瓦重复性很高&#xff0c;我们如何快速的创建呢?下面我们来学会快速用幕墙来创建屋面瓦的技巧。 1.新建“公制轮廓-竖挺”族&#xff0c;以此来创建瓦的族(以便于载入项目中使用) 2.在轮廓族中绘制瓦的轮廓(轮廓需要闭合)&#xff0c;将族名称…

【JavaSE】Java基础语法(三十四):实现多线程

文章目录 1. 简单了解多线程2. 并发和并行3. 进程和线程4. 实现多线程方式一&#xff1a;继承Thread类【应用】5. 实现多线程方式二&#xff1a;实现Runnable接口【应用】6. 实现多线程方式三: 实现Callable接口【应用】7. 设置和获取线程名称【应用】8. 线程休眠【应用】9. 线…

Z-Library2023现状

网上基本上年年都会传出来Z-Library要被干掉的消息&#xff0c;我一直觉得&#xff0c;如果那真的发生了&#xff0c;会是人类的悲哀。 由于之前我存储的地址又挂了&#xff0c;所以紧急又寻找了一下。 1.朋友帮忙 朋友帮我搜了一下&#xff0c;发现有三个地址。 他说这第一个…

xlsx是什么格式

xlsx是什么格式? xlsx是Excel文档的扩展名&#xff0c;其基于Office Open XML标准的压缩文件格式&#xff0c;取代了其以前专有的默认文件格式&#xff0c;在传统的文件名扩展名后面添加了字母x&#xff0c;即.xlsx取代.xls。 xlsx文件是什么格式? xlsx是Excel表格的文件格…
最新文章