首页 > 编程语言 >Java Script - Web Api

Java Script - Web Api

时间:2024-09-13 17:37:44浏览次数:12  
标签:box Web Java DOM 元素 Api const document 属性

变量声明有3个 ver、let 和 const。建议const优先,其次为let。

            const arr = ['red', 'pink']
            arr.push('blue')
            
            arr = [1, 2, 4]
            arr.push(5) // 错误,arr为const

1、Web Api 基本认知

1.1、作用和分类

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

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

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

1.2、DOM树

DOM树是什么:

  • 将HTML文档以树状结构直观地表现出来,我们称为文档树或DOM树;
  • 描述网页内容关系的名词;
  • 文档树直观地体现了标签与标签之间的关系。

1.3、DOM对象

            const div = document.querySelector('div') // dom对象
            // 打印对象
            console.dir(div)

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

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

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

document对象:

  • 是DOM里提供的一个对象;
  • 所以它提供的属性和方法都是用来访问和操作网页内容的;
  • 网页所有内容都在document里面。

2、获取DOM元素

2.1、根据CSS选择器来获取DOM元素

2.1.1、选择匹配的第一个元素

语法:document.querySelector('css选择器')

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

返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象。

    <body>
        <div class="box">123</div>
        <div class="box">abc</div>
        <p id="nav">导航栏</p>
        <ul>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
        </ul>

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

            const nav = document.querySelector('#nav')
            console.log(nav)

            // 获取第一个小ul.li
            const li = document.querySelector('ul li:first-child')
            console.log(li)
        </script>
    </body>

2.1.2、选择匹配的多个元素

语法:document.querySelectorAll('css选择器')

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

返回值:CSS选择器匹配的多个元素,得到的是一个伪数组(有长度有索引号,但是没有pop()、push()等数组方法,想要得到里面的每一个对象,则需要遍历(for)的方式获得)。

    <body>
        <div class="box">123</div>
        <div class="box">abc</div>
        <p id="nav">导航栏</p>
        <ul>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
            <li>测试</li>
        </ul>

        <script>
            const lis = document.querySelectorAll('ul li')
            console.log(lis)
            for(let i = 0; i < lis.length; i++) {
                console.log(lis[i]) // 每一个li对象
            }

            const p = document.querySelectorAll('#nav')
            p[0].style.color = 'red'
        </script>
    </body>

2.1.3、其他获取DOM元素方法

        <script>
            // 根据id获取一个元素
            document.getElementById('nav')
            // 根据标签获取一类元素,获取页面所有div
            document.getElementsByTagName('div')
            // 根据类名获取元素,获取页面所有类名为w的
            document.getElementsByClassName('w')
        </script>

3、操作元素内容

  • DOM对象都是根据标签生成的,所以操作标签,本质上都是操作DOM对象;
  • 就是操作对象使用的点语法;
  • 如果想要修改标签元素里面的内容,则可以使用如下几种方式。

3.1、元素.innerText 属性

  • 将文本内容添加、更新到任意标签位置;
  • 显示纯文本,不解析标签。
    <body>
        <div class="box">我是文字的内容</div>
        <script>
            // 获取元素
            const box = document.querySelector('.box')
            // 修改文字内容 对象.innerText 属性
            console.log(box.innerText) // 获取文字内容
            box.innerText = "我是一个盒子" // 修改文字内容
            box.innerText = "<strong>我是一个盒子</strong>" // 不会加粗
        </script>
    </body>

3.2、元素.innerHTML 属性

    <body>
        <div class="box">我是文字的内容</div>

        <script>
            // 获取元素
            const box = document.querySelector('.box')
            // 修改文字内容 对象.innerText 属性
            console.log(box.innerHTML) // 获取文字内容
            box.innerHTML = "<strong>我是一个盒子</strong>" // 会加粗
        </script>
    </body>

4、操作元素属性

4.1、操作元素常用属性

通过js设置、修改标签元素属性,比如通过src更换图片;

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

语法:对象.属性=值

    <body>
        <img src="./images/1.webp" alt="" />
        <script>
            // 获取图片元素
            const img = document.querySelector('img');
            // 修改图片对象的属性
            img.src = '/images/2.webp'
        </script>
    </body>

4.2、操作元素样式属性

通过js设置、修改标签元素的样式属性,比如:

  • 通过轮播图小圆点自动更换颜色样式;
  • 点击按钮可以滚动图片,移动的图片的位置等等。

4.2.1、通过style属性操作css

语法:对象.style.样式属性=值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=dege" />
        <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
        <title>年会抽奖</title>

        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div class="box"></div>
        <script>
            // 获取元素
            const box = document.querySelector('.box')
            // 修改样式属性 对象.style.样式属性='值'
            box.style.width = '300px'
            // 多组单词的采取小驼峰命名法
            box.style.backgroundColor = 'hotpink'
            box.style.border = '2px solid blue'
            box.style.borderTop = '2px solid red'
        </script>
    </body>
</html>

注意:

  • 修改样式通过style属性引出;
  • 如果属性有 - 连接符,需要转换为小驼峰命名法;
  • 赋值的时候,需要的时候不要忘记加css单位。

4.2.2、通过类名(className)修改样式

如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。

语法:元素.className = 'active' // active是一个css类名

注意:由于class是关键字,所以使用className去代替,className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名。

4.2.3、通过classList操作类控制css

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

语法:

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

 

 

2.2、

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

p86

标签:box,Web,Java,DOM,元素,Api,const,document,属性
From: https://www.cnblogs.com/aoe1231/p/18412603

相关文章

  • Java超详细知识点——I/O流(字节流和字符流)
    File类:JavaAPI:java.io.File类是用来操作文件或文件夹的,无法用来读写1.首先创建一下file的对象:里面可以写相对路径或者绝对路径Filefile=newFile("CCC.java");也可以使用其他构造方法//Stringpath="D:\\ch06";//StringfileName="1.txt";Filefile=new......
  • Capital许可管理最佳实践
    Capital许可管理最佳实践:具体方法与案例引领企业走向合规与高效在数字化时代,软件已成为企业运营不可或缺的一部分,而Capital许可管理则是确保软件合规使用、优化成本和控制风险的关键。本文将结合具体实践方法和案例,为您详细介绍Capital许可管理的最佳实践。一、明确许可需求与策......
  • 【flask系列】基于flask的 RESTful API示例
    原创xlwin136人工智能教学实践RESTfulAPI(RepresentationalStateTransferApplicationProgrammingInterface)是一种基于REST架构风格的网络应用程序接口。REST是一种设计网络服务的架构风格,它通过使用HTTP协议的通用动词(如GET、POST、PUT、DELETE等)来允许客户端和......
  • Sentinel在边缘服务(如API网关)中的应用和策略是什么?
    在微服务架构中,API网关(也称为边缘服务)通常作为所有客户端请求的单一入口点。API网关不仅可以提供路由功能,还将安全性、监控、缓存、限流、动态数据转换等功能集中在一起。Sentinel在API网关中的应用主要是为了保护后端服务免受过载风险,确保系统的稳定性和响应时间。以下是......
  • Java 是值传递还是引用传递,又是怎么体现的?
    一、基本概念值传递是指在方法调用时,将实际参数的值复制一份传递给方法的形式参数。对形式参数的修改不会影响实际参数的值。引用传递则是将实际参数的引用(内存地址)传递给方法的形式参数,在方法中对形式参数所指向的对象进行修改会影响到实际参数所指向的对象。二、Java中的......
  • 基于Java部门办公网站系统的设计与开发的计算机毕设
    摘 要本次课程设计主要是针对于学校教研信息的登记管理归档根据实际工作流程做出适合实际工作的,能够减少工作流程的工作量,有效的提高工作效率的网站系统。本次设计在开始的前台界面设计时主要是使用DIV+CSS布局样式,设计时能灵活准确的定位每一个模块的位置,在程序语言上使用的是ja......
  • JAVA国际版同城服务系统:满足全球用户需求的解决方案
    随着全球化的加速和互联网的普及,人们对同城服务的需求日益增长,要求也越来越高。为了满足全球用户的需求,JAVA国际版同城服务系统应运而生。该系统以JAVA技术为核心,致力于提供高效、稳定、安全的服务,让用户在全球任何角落都能享受到贴心、便捷的同城服务。JAVA国际版同城服务系统采用......
  • 白骑士的Java教学介绍篇 1.1 Java简介
            欢迎来到Java编程的世界!无论你是编程新手还是有一定经验的开发者,学习Java都将为你打开一个广阔的编程领域。Java作为一种功能强大且广泛使用的编程语言,自诞生以来便以其平台无关性、面向对象的特性和丰富的生态系统赢得了全球开发者的青睐。在本篇博客中,我们将......
  • 基于JAVA超市管理系统的计算机毕设
    目录摘要Abstract1绪论1.1社会背景1.2超市背景1.3系统开发背景1.4课题研究的目的和意义1.5系统功能特点1.6本文主要工作2系统可行性研究2.1技术可行性研究2.1.1采用java语言编写2.1.2采用Eclipse开发平台2.1.3采用Access数据库2.2经济可行性研究2.3操作可行性研究3......
  • 按图搜索的实时性:阿里巴巴拍立淘API返回值的快速响应
    阿里巴巴拍立淘API作为一种基于图像识别技术的搜索服务,其返回值的快速响应是其实时性的重要体现。以下是对阿里巴巴拍立淘API返回值的快速响应的详细解释,并包含代码示例。一、快速响应机制图像识别技术:阿里巴巴拍立淘API利用先进的图像识别技术,能够迅速分析用户上传的图片特征,并与......