Web前端 JS WebAPI

1、操作DOM


1.1、什么DOM?

DOM(Document Object Model——文档对象模型):DOM是浏览器提供的一套专门用来操作网页内容的功能

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

DOM树是什么?

  • 将 HTML 文档以树状结构直观的表现出来,称之为文档树或 DOM 树
  • DOM树直观的体现了标签与标签之间的关系

在这里插入图片描述

DOM对象:浏览器根据HTML标签生成的 JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

DOM的核心思想:**把网页内容当做对象来处理!**它提供的属性和方法都是用来访问和操作网页内容的

1.2、获取DOM对象

前提条件:要操作一个Dom节点, 就必须要先获得这个Dom节点,通过JS选择页面中的HTML元素

打印对象:console.dir('对象名')

querySelector

选择匹配的第一个元素

返回值:CSS选择器匹配的第一个元素,一个 HTML Element对象。 如果没有匹配到,则返回null

具体语法:

<body>
    <div>这是第一个盒子</div>
    <div id="box">这是第二个盒子</div>

    <ul>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>

    <script>
        // 获取匹配的第一个元素
        const div = document.querySelector('div')
        console.log(div);

        const box = document.querySelector('#box')
        console.log(box);

        const li = document.querySelector('ul li')		// 只能获取第一个元素
        console.dir(li)		// Java 
    </script>
</body>

querySelectorAll

选择匹配的多个元素

返回值:CSS选择器匹配的NodeList 对象集合

具体语法:

<body>
    <ul class="course">
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>

    <script>
        // 获取匹配的多个元素
        const lis = document.querySelectorAll('.course li')
        console.log(lis)
    </script>
</body>    

注:通过querySelector系列获得的元素得到的是一个伪数组

  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法
  • 要想得到里面的每一个对象,则需要遍历(for)的方式获得

getElement系列

getElement系列方法获取DOM元素

<body>
    <h1>我是h1标题</h1>
    <div id="box">我是div盒子</div>

    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>

    <input type="checkbox" name="hobbies"> code
    <input type="checkbox" name="hobbies"> girl

    <script>
        let box = document.getElementById('box')			// id
        let items = document.getElementsByClassName('item')		// 类
        let h1 = document.getElementsByTagName('h1')		// 标签名称
        let hobbies = document.getElementsByName('hobbies')		// 相同 name 属性

        console.log(h1)
        console.log(box)
        console.log(items)
        console.log(hobbies)
    </script>
</body>

操作元素内容

  • 对象.innerText 属性
  • 对象.innerHTML 属性

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象!

<body>
    <div class="box">我是一个div盒子</div>
    
    <script>
        // 获取元素
        const box = document.querySelector('.box')
        // 修改文本内容
        console.log(box.innerText)      // 获取文本内容
        box.innerText = '<em>我是div标签 我可以布局网页</em>'       // 不解析标签
        box.innerHTML = '<em>我是div标签 我可以布局网页</em>'       // 会解析标签
    </script>
</body>

两者区别:

相同点:

  • 都可以修改标签文本内容

不同点:

  • innerText属性,只会显示纯文本,不解析标签
  • 而innerHTML属性,既可以显示纯文本,也会解析标签,多标签建议使用模板字符

1.3、操作元素属性

元素常用属性

还可以通过 JS 设置/修改标签元素属性,常见的属性有: href、title、src 等

<body>
    <img src="./images/1.jpg" title="漂亮可爱的小姐姐图片">

    <button onclick="changeImg()">点我更换图片</button>

    <script>
        function changeImg() {
            let arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg']
            // 生成随机数
            let ran = Math.floor(Math.random() * arr.length)
            // 获取图像元素
            const img = document.querySelector('img')
            // console.log(img)
            img.src = './images/' + arr[ran]
            img.title = '漂亮可爱的小姐姐图片'
        }
    </script>
</body>

元素样式属性

通过 style 属性操作CSS
<body>
    <div class="box"></div>
    
    <script>
        // 获取元素
        const box = document.querySelector('.box')
        // console.log(box)
        // 修改样式属性  对象名.style.样式属性 = '值'
        box.style.width = '350px'
        box.style.height = '350px'
        box.style.backgroundColor = 'orange'
    </script>
</body>

注:

  • CSS属性名写法为驼峰命名法
  • 赋值的时候,需要的时候不要忘记加CSS单位
  • 通常用于修改样式较少时使用,而且添加的是行内样式(权重较高)
通过类名(className) 操作CSS

如果修改的样式比较多,直接通过style属性修改比较繁琐,代码比较长,可以通过借助于CSS类名的形式

<style>
    .circle {
        width: 300px;
        height: 300px;
        background-color: sandybrown;
        border-radius: 50%;
        cursor: pointer;
    }

    .box {
        color: white;
        text-align: center;
        line-height: 300px;
    }
</style>

<body>
    <div class="box">这是一个圆圈</div>

    <script>
        // 获取元素
        const div = document.querySelector('div')
        // 添加类名
        div.className = 'box circle'
    </script>
</body>

注:

  • 由于class是关键字,所以使用className去代替
  • className是使用新值换旧值(覆盖),如果需要添加一个类,需要保留之前的类
通过 classList 操作类控制CSS

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

<style>
    .wrap {
        display: flex;
        justify-content: space-around;
        width: 200px;
        margin: 60px auto;
    }

    .item {
        list-style: none;
        width: 20px;
        height: 20px;
        background-color: gray;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        color: white;
    }

    .active {
        background-color: coral;
        cursor: pointer;
    }
</style>

<body>
    <ul class="wrap">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

    <script>
        // 获取元素
        const item = document.querySelector('.item')
        // 修改样式     追加一个类 add()
        item.classList.add('active')
        // 修改样式     移除一个类  remove()
        item.classList.remove('active')
        // 切换样式     切换一个类  toggle()    没有添加,有则移除
        item.classList.toggle('active')
    </script>
</body>

className与classList两者区别:

  • className 会覆盖之前类名,如果需要以前的类名,在编写的时候还要手动加上!
  • classList 是追加和删除,不影响之前类名,修改样式也比较方便

表单元素属性

  • 获取:DOM对象.属性名
  • 设置:DOM对象.属性名 = 新值
<input type="text" name="g-name" id="g-name" value="笔记本电脑">

<script>
    // 获取元素
    const gName = document.querySelector('#g-name')
    // 获取值
    console.log(gName.value)        // 笔记本电脑
    // 设置文本框的值
    gName.value = '平板'
    // 修改文本框 type 属性
    gName.type = 'date'
</script>

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示,如果为true 代表添加了该属性,如果是false代表移除了该属性

例如: disabled、checked、selected

在这里插入图片描述

<input type="checkbox" name="hobbies"> code
<input type="checkbox" name="hobbies"> girl
<input type="checkbox" name="hobbies"> swim

<script>
    // 获取元素
    const ipts = document.querySelectorAll('input')
    for (let i = 0; i < ipts.length; i++) {
        console.log(ipts[i].checked)        // 默认没有勾选,返回false
        // 让三个多选框全部选中
        ipts[i].checked = true
    }
    // 让第一个复选框为禁用状态
    ipts[0].disabled = true
</script>

自定义属性

  • 标准属性:也就是标签天生自带的属性,比如class id title等,可以直接使用点语法操作,比如:disabled、checked、selected
  • 自定义属性:
    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取
<ul>
    <li data-gid="1001" data-hot="热卖商品">1</li>
    <li data-gid="1002">2</li>
    <li data-gid="1003">3</li>
</ul>

<script>
    const li = document.querySelector('ul>li:first-child')
    console.log(li.dataset)
    console.log(li.dataset.gid)     	// 1001
    console.log(li.dataset['hot'])      // 热卖商品
</script>

1.4、定时器

网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发,例如:网页中的倒计时

定时器-间歇函数

开启定时器

具体语法:setInterval(函数,间隔时间)

<script>
    function love() {
        document.write(`<p>我爱你到天长地久</p>`)
    }

    let id = setInterval(love, 2000)        
    console.log(id)     	// 1
</script>

作用:

  • 每隔一段时间都会调用这个函数
  • 间隔时间单位是毫秒

注:

  • 定时器调用函数名字的时候不需要加括号

  • 定时器返回的是一个id数字

关闭定时器

一般不会刚创建就停止,而是满足一定条件才停止

具体语法:clearInterval(变量名)

<script>
    function love() {
        document.write(`<p>我爱你到天长地久</p>`)
    }

    let id = setInterval(love, 2000)
    console.log(id)         // 1

    // 关闭定时器
    clearInterval(id)
</script>

2、事件


2.1、何为事件?

事件是指用户在访问页面时,对页面内容做出的动作或者产生的行为

什么是事件监听?

就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为绑定事件或者注册事件

比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等

事件监听

事件类型

事件对象

3、DOM节点操作


3.1、增

3.2、删

3.3、改

3.4、查

4、操作BOM


5、正则表达式


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

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

相关文章

手把手教你使用vue创建第一个vis.js

先看一下实现效果吧 &#xff0c;如下图 &#xff1a; 为什么要写这篇文章呢&#xff1f;因为之前有浅浅的了解一下vis.js&#xff0c;后期开发中没有使用vis&#xff0c;所以太深奥的也不懂&#xff0c;但是当时是用js写的。这两天有人问我用vue怎么写&#xff0c;然后说看到…

减治法实现插入排序,减治法实现二叉查找树(二叉搜索数,二叉排序数)的创建、插入与查找(含解析与代码实现)

&#x1f38a;【数据结构与算法】专题正在持续更新中&#xff0c;各种数据结构的创建原理与运用✨&#xff0c;经典算法的解析✨都在这儿&#xff0c;欢迎大家前往订阅本专题&#xff0c;获取更多详细信息哦&#x1f38f;&#x1f38f;&#x1f38f; &#x1fa94;本系列专栏 -…

嵌入式软件开发之Linux下C编程

目录 前沿 Hello World&#xff01; 编写代码 编译代码 GCC编译器 gcc 命令 编译错误警告 编译流程 Makefile 基础 何为 Makefile Makefile 的引入 前沿 在 Windows 下我们可以使用各种各样的 IDE 进行编程&#xff0c;比如强大的 Visual Studio。但是在Ubuntu 下如何进…

【Java版oj】day10 井字棋、密码强度等级

目录 一、井字棋 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 二、密码强度等级 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 一、井字棋 &a…

CAT8网线测试仪使用中:线缆的抗干扰参数解读以及线缆工艺改进注意事项

FLUKE Agent platform -深圳维信&#xff0c;带你更深入的了解铜缆测试&#xff0c;详细为您讲解什么是TCL/ELTCL&#xff0c;他们对数据的传输到底有什么影响呢&#xff1f; 前情分析&#xff1a;为什么用双绞线传输信号&#xff1f;&#xff08;一图就懂&#xff09; TCL&a…

【深度解刨C语言】符号篇(全)

文章目录一.注释二.续行符与转义符1.续行符2.转义符三.回车与换行四.逻辑操作符五.位操作符和移位操作符六.前置与后置七.字符与字符串八./和%1.四种取整方式2.取模与取余的区别和联系3./两边异号的情况1.左正右负2.左负右正九.运算符的优先级一.注释 注释的两种符号&#xff…

Sentinel

SentinelSentinel介绍什么是Sentinel?为什么需要流量控制&#xff1f;为什么需要熔断降级&#xff1f;一些普遍的使用场景本文介绍参考&#xff1a;Sentinel官网《Spring Cloud Alibaba 从入门到实战.pdf》Sentinel下载/安装项目演示构建项目控制台概览演示之前需先明确&#…

【webrtc】ICE 到VCMPacket的视频内存分配

ice的数据会在DataPacket 构造是进行内存分配和拷贝而后DataPacket 会传递给rtc模块处理rtc模块使用DataPacket 构造rtp包最终会给到OnReceivedPayloadData 进行rtp组帧。吊炸天的是DataPacket 竟然没有声明析构方法。RtpVideoStreamReceiver::OnReceivedPayloadData 的内存是外…

3.网络爬虫——Requests模块get请求与实战

Requests模块get请求与实战requests简介&#xff1a;检查数据请求数据保存数据前言&#xff1a; 前两章我们介绍了爬虫和HTML的组成&#xff0c;方便我们后续爬虫学习&#xff0c;今天就教大家怎么去爬取一个网站的源代码&#xff08;后面学习中就能从源码中找到我们想要的数据…

普通Java工程师 VS 优秀架构师

1 核心能力 1.1 要成为一名优秀的Java架构师 只懂技术还远远不够&#xff0c;懂技术/懂业务/懂管理的综合型人才&#xff0c;才是技术团队中的绝对核心。 不仅仅是架构师&#xff0c;所有的技术高端岗位&#xff0c;对人才的综合能力都有较高的标准。 架构路线的总设计师 规…

安卓渐变的背景框实现

安卓渐变的背景框实现1.背景实现方法1.利用PorterDuffXfermode进行图层的混合&#xff0c;这是最推荐的方法&#xff0c;也是最有效的。2.利用canvas裁剪实现&#xff0c;这个方法有个缺陷&#xff0c;就是圆角会出现毛边&#xff0c;也就是锯齿。3.利用layer绘制边框1.背景 万…

多线程案例——阻塞队列

目录 一、阻塞队列 1. 生产者消费者模型 &#xff08;1&#xff09;解耦合 &#xff08;2&#xff09;“削峰填谷” 2. 标准库中的阻塞队列 3. 自己实现一个阻塞队列&#xff08;代码&#xff09; 4. 自己实现生产者消费者模型&#xff08;代码&#xff09; 一、阻塞队列…

【Pytorch】 理解张量Tensor

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 这是目录张量Tensor是什么&#xff1f;张量的创建为什么要用张量Tensor呢&#xff1f;总结张量Tensor是什么&#xff1f; 在深度学习中&#xff0c;我们经常会遇到一个概念&#xff…

更改Hive元数据发生的生产事故

今天同事想在hive里用中文做为分区字段。如果用中文做分区字段的话&#xff0c;就需要更改Hive元 数据库。结果发生了生产事故。导致无法删除表和删除分区。记一下。 修改hive元数据库的编码方式为utf后可以支持中文&#xff0c;执行以下语句&#xff1a; alter table PARTITI…

Vue初入,了解Vue的发展与优缺点

作者简介&#xff1a;一名计算机萌新、前来进行学习VUE,让我们一起进步吧。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;我叫于豆豆吖的主页 前言 从本章开始进行Vue前端的学习&#xff0c;了解Vue的发展&#xff0c;以及背后的故事。 一.vue介…

ASEMI代理瑞萨TW9992AT-NA1-GE汽车芯片

编辑-Z TW9992AT-NA1-GE是一款低功耗NTSC/PAL模拟视频解码器&#xff0c;专为汽车应用而设计。它支持单端、差分和伪差分复合视频输入。集成了对电池短路和对地短路检测&#xff0c;先进的图像增强功能&#xff0c;如可编程的自动对比度调整&#xff08;ACA&#xff09;和MIPI…

【Linux】网络编程套接字(下)

&#x1f387;Linux&#xff1a; 博客主页&#xff1a;一起去看日落吗分享博主的在Linux中学习到的知识和遇到的问题博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 看似不起波澜的日复一日&#xff0c;一定会在某一天让你看见坚持…

ASEMI代理MIMXRT1064CVJ5B原装现货NXP车规级MIMXRT1064CVJ5B

编辑&#xff1a;ll ASEMI代理MIMXRT1064CVJ5B原装现货NXP车规级MIMXRT1064CVJ5B 型号&#xff1a;MIMXRT1064CVJ5B 品牌&#xff1a;NXP /恩智浦 封装&#xff1a;LFGBA-196 批号&#xff1a;2023 安装类型&#xff1a;表面贴装型 引脚数量&#xff1a;196 类型&#…

【Hadoop-yarn-01】大白话讲讲资源调度器YARN,原来这么好理解

YARN作为Hadoop集群的御用调度器&#xff0c;在整个集群的资源管理上立下了汗马功劳。今天我们用大白话聊聊YARN存在意义。 有了机器就有了资源&#xff0c;有了资源就有了调度。举2个很鲜活的场景&#xff1a; 在单台机器上&#xff0c;你开了3个程序&#xff0c;分别是A、B…

Redis知识点汇总

前言 梳理知识 说一下项目中的Redis的应用场景 首先知道Redis的5大value类型: string,list,hash, set ,zset 2.基本上是缓存 3.为的是服务无状态, 4.无锁化 Redis是单线程还是多线程 1.无论什么版本,工作线程就一个 2.6.x高版本出现IO多线程
最新文章