【JavaEE】_JavaScript(Web API)

目录

1. DOM 

1.1 DOM基本概念

1.2 DOM树

2. 选中页面元素

2.1 querySelector

2.2 querySelectorAll

3. 事件

3.1 基本概念

3.2 事件的三要素

3.3 示例

4.操作元素

4.1 获取/修改元素内容

4.2 获取/修改元素属性

4.3 获取/修改表单元素属性

4.3.1 value:获取到元素里用户填写的值;

4.3.2 type:输入框的形态(文本框、密码框...)

4.4 获取/修改样式属性

4.4.1 修改内联样式:修改style属性的值

4.4.2 修改元素应用的CSS类名

5.操作结点

5.1 新增结点

5.2 删除结点


WebAPI都是浏览器给JS提供的功能,如果浏览器不同,API的行为也可能存在差异;

1. DOM 

1.1 DOM基本概念

DOM即Document Object Model 即文档(HTML)对象(JS对象)模型

含义为:把HTML中的每个标签都可以映射到JS中的一个对应对象。

故而:标签上显示的内容可以通过JS对象感知到,同时JS对象修改对应属性,能够影响到标签的显示;

1.2 DOM树

DOM树结构形如:

注:(1)文档:一个页面就是一个文档,即document;

(2)元素:页面中所有的标签都成为元素,即element;

(3)结点:网页中所有的内容都可以称为结点(标签结点,注释结点,文本节点,属性结点等),即note;

接下来将介绍常用的DOMAPI;

2. 选中页面元素

2.1 querySelector

在CSS中,使用选择器选中元素进行操作,在JS中,使用querySelector(CSS选择器)选中页面元素,返回被选中的具体对象;

    <div class="box">abc</div><div id="id"> def</div><h3><span><input type="text"></span></h3><script>let elem1=document.querySelector('.box');console.log(elem1);let elem2=document.querySelector('#id');console.log(elem2);let elem3=document.querySelector('h3>span>input');console.log(elem3);</script>

运行结果为:

注:(1)document是浏览器中的全局对象,任何一个页面都有一个document

(2)所有的DOM API都是通过document对象展开的;

(3)除console.log之外,还可以使用cconsoe.dir打印对象,以elem1为例:

展开后可以查看dir对象的所有属性;

(4)CSS所有的选择器都可以在querySelector处使用;

2.2 querySelectorAll

    <div class="box">abc</div><div id="id"> def</div><h3><span><input type="text"></span></h3><script>var arr=document.querySelectorAll('div');console.log(arr);</script>

运行结果为:

注:如果有多个类选择器重名,则querySelector默认选中第一个;

如果希望实现全部选中,则可使用querySelectorAll,二者使用方法完全相同,只是其返回的是一个数组;

3. 事件

3.1 基本概念

事件就是针对用户的操作进行的一些响应。

用户的行为会在浏览器中产生一些事件,要能够和用户交互,就需要代码针对事件做出反应;

3.2 事件的三要素

(1)事件源:哪个元素产生的事件;

(2)事件类型:是点击,选中还是修改等等;

(3)处理程序:事件发生后要执行哪个代码;

3.3 示例

<div class="box" onclick="alert('hello')">选择</div>

运行结果如下:

点击选择:

注:这是一个最简单的方式:直接在元素中使用onXXX方法来绑定一个事件处理程序;

但这种写法在实际开发中并不常用,更常用的方式如下:

    <div class="box" >选择</div><div id="id">def</div><script>let div = document.querySelector('.box');div.onclick = function(){alert('hello');}</script>

其中,事件源为名为.box的div,事件类型为点击事件,事件处理程序为function函数;

4.操作元素

4.1 获取/修改元素内容

先获取到该元素,使用innerHTML属性,就能拿到元素里的内容,修改该属性就会影响界面显示:

(一)使用innerHTML:

    <div class="box" >abc</div><div id="id">def</div><script>let div = document.querySelector('.box');div.onclick = function(){console.log(div.innerHTML);}</script>

运行结果为:

 

点击abc四次后查看console标签页:

注:(1)输出“选择”文本前的数字是chrome控制台将相邻的相同的日志合并的结果,如果需要展开,可以在设置(Setting)中取消以下选项:

(二)修改innerHTML:

    <div class="box" >abc</div><div id="id">def</div><script>let div = document.querySelector('.box');div.onclick = function(){//console.log(div.innerHTML);div.innerHTML +='a';console.log(div.innerHTML);}</script>

运行结果为:

点击四次abc后查看console标签页:

对应的,页面显示也发生改变:

4.2 获取/修改元素属性

HTML的标签属性也会映射到JS对象中;

代码示例:点击图片从1.jpg更换显示为2.jpg:

    <img src="1.jpg" width="200px" alt=""><script>let img = document.querySelector('img');img.onclick=function(){console.log(img.src);img.src='2.jpg';}</script>

运行页面如下:

点击图片后:

4.3 获取/修改表单元素属性

表单元素(input,textarea,select...)有一些特别的属性,普通标签没有,如:

4.3.1 value:获取到元素里用户填写的值

代码示例1:打印在输入框中输入的内容

    <input type="text"><button>点击</button><script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick = function(){console.log(input.value);}</script>

运行代码后,在网页页面输入框中输入hello world:

console标签页有:

注:不能将console.log(input.value)写为console.log(input.innerHTML),innerHTML获取到的是标签的内容,即双标签的开始和结束标签中编写的内容,input是单标签,没有内容;

代码示例2:点击按钮令输入框中的数字+1,并显示结果

    <script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick=function(){let value = parseInt(input.value);value+=1;input.value = value;}</script>

运行后输入4点击两次+1按钮:

注:(1)value属性是一个String类型,直接+1是在进行字符串拼接:

        button.onclick=function(){let value = input.value;value+=1;input.value = value;}

进行数值+1需要使用parseInt()函数将字符串类型转化为整数类型;

4.3.2 type:输入框的形态(文本框、密码框...)

代码示例:输入框文本与密码的更换

    <input type="text"><button>隐藏密码</button><script>let input = document.querySelector('input');let button = document.querySelector('button');button.onclick = function(){if(input.type=='text'){input.type='password';button.innerHTML='显示密码';}else{input.type='text';button.innerHTML='隐藏密码';}}</script>

运行后,在输入框中输入123456:

点击隐藏密码后:

4.4 获取/修改样式属性

4.4.1 修改内联样式:修改style属性的值

代码示例1:实现div点击即可字体放大

    <div style="font-size: 20px;">Hello JavaScript</div><script>let div = document.querySelector('div');div.onclick=function(){//先获取到当前字体的大小(转换为数值)let fontSize=parseInt(div.style.fontSize);fontSize +=10;// 设置字体大小时,切记px单位div.style.fontSize = fontSize+'px';  }</script>

运行后初始页面如下:

点击两次后:

注:(1)JS中所写的样式的属性名与CSS属性可能不同:

字体大小属性在CSS中写为font-size(脊柱命名法),在JS中写为fontSize(驼峰命名法),由于CSS中无需进行算术运算且CSS不区分大小写的,在JS等其他语言中,就需要进行转换;

属性名是相同的,只需将脊柱命名的属性名改为驼峰命名即可;

4.4.2 修改元素应用的CSS类名

代码示例1:切换夜间模式:

    <div id='one' class="light" style="font-size:20px; height:500px">切换</div><style>.light{color: black;background-color: white;}.dark{color: white;background-color: black;}</style><script>let div = document.querySelector("#one");div.onclick = function(){if(div.className == 'dark'){div.className='light';}else{div.className='dark';}}</script>

运行后网页初始页面为:

点击切换后,页面如下:

以上操作都是针对当前页面上已有元素进行展开的,

也可以通过JS实现对页面元素的创建与删除;

5.操作结点

5.1 新增结点

新增节点分为两个步骤:

(1)创建一个元素;

(2)将这个元素结点插入到DOM树中

代码示例1:实现在“请输入”文字后新增输入框,其默认值为hello:

    <div class="one">请输入:</div><script>let input = document.createElement('input');input.value='hello';// 输入框中默认显示hello;let div = document.querySelector(".one");div.appendChild(input);</script>

运行后界面如下:

代码示例2:实现无序列表1 1 和2 2 后新增3 3至9 9:

    <ul><li>1 1</li><li>2 2</li></ul><script>let ul = document.querySelector('ul');for(let n=3;n<10;n++){let li = document.createElement('li');li.innerHTML = n+' '+n;ul.appendChild(li);}</script>

运行后页面如下:

注:(1)使用appendChild将新增结点插入到指定结点的最后一个孩子之后

(2)使用insertBefore将新增结点插入到指定结点之前

5.2 删除结点

代码示例1:基于前例无序列表1 1至9 9,实现删除3 3元素并通过console标签页打印3 3:

        let toDelete = document.querySelectorAll('li')[2];console.log(toDelete);ul.removeChild(toDelete);

运行后页面如下:

console标签页为:

注:使用parentElem.removeChild(childElem)删除指定元素的子元素

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

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

相关文章

机器学习、深度学习、强化学习、迁移学习的关联与区别

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要了解并初步探究机器学习、深度学习、强化学习、迁移学习的关系与区别&#xff0c;通过清晰直观的关系图展现出四种“学习”之间的关系。虽然这四种“学习”方法在理论和应用上存在着一定的区别&#xff0c;但它们之间也…

FreeRTOS 队列管理

概览 基于 FreeRTOS 的应用程序由一组独立的任务构成——每个任务都是具有独立权 限的小程序。这些独立的任务之间很可能会通过相互通信以提供有用的系统功能。 FreeRTOS 中所有的通信与同步机制都是基于队列实现的。 本章期望让读者了解以下事情   如何创建一个队列   …

有限合伙协议书(模板)下

第六章 合伙事务的执行 第十七条 有限合伙人不执行合伙事务&#xff0c;对外不具有代表权。有限合伙企业由普通合伙人执行合伙事务。 第十八条 经全体合伙人一致同意可以委托一个普通合伙人&#xff08;也可以委托数个普通合伙人&#xff09;对外代表合伙企业&#xff0c;执…

算法学习——LeetCode力扣回溯篇1

算法学习——LeetCode力扣回溯篇1 77. 组合 77. 组合 - 力扣&#xff08;LeetCode&#xff09; 描述 任何顺序 返回答案。 示例 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 示例 2&#xff1a; 输…

【机器学习案例4】为机器学习算法编码分类数据【含源码】

目录 编码分类数据 序数编码 标签编码 一次性编码 目标编码 目标编码的优点 目标编码的缺点 在现实生活中,收集的原始数据很少采用我们可以直接用于机器学习模型的格式,即数值型数据。因此,需要进行一些预处理,以便以正确的格式呈现数据、选择信息丰富的数据或降低其…

【C++函数探幽】内联函数inline

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1. 前言2.概念3.特性…

GPT-4带来的思想火花

GPT-4能够以其强大的生成能力和广泛的知识储备激发出众多思想火花。它能够在不同的情境下生成新颖的观点、独特的见解和富有创意的解决方案&#xff0c;这不仅有助于用户突破思维定势&#xff0c;还能促进知识与信息在不同领域的交叉融合。 对于研究者而言&#xff0c;GPT-4可能…

浅谈业务场景中缓存的使用

业务场景中缓存的使用 一、背景二、缓存分类1.本地缓存2.分布式缓存 三、缓存读写模式1.读请求2.写请求 四、缓存穿透1.缓存空对象2.请求校验3.请求来源限制4.布隆过滤器 五、缓存击穿1.改变过期时间2.串行访问数据库 六、缓存雪崩1.避免集中过期2.提前更新缓存 七、缓存与数据…

【MATLAB】鲸鱼算法优化混合核极限学习机(WOA-HKELM)回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 鲸鱼算法优化混合核极限学习机&#xff08;WOA-HKELM&#xff09;回归预测算法是一种结合鲸鱼优化算法和混合核极限学习机的混合算法。其原理主要包含以下几个步骤&#xff1a; 初始化&am…

UniApp学习之旅:从入门到快速上手

随着移动互联网的迅猛发展&#xff0c;跨平台应用开发成为了开发者们的热门选择。UniApp&#xff0c;作为一款使用Vue.js开发所有前端应用的框架&#xff0c;因其简单、高效、易上手的特性&#xff0c;受到了广大开发者的青睐。本文将带你走进UniApp的世界&#xff0c;从基础学…

【leetcode】深搜、暴搜、回溯、剪枝(C++)2

深搜、暴搜、回溯、剪枝&#xff08;C&#xff09;2 一、括号生成1、题目描述2、代码3、解析 二、组合1、题目描述2、代码3、解析 三、目标和1、题目描述2、代码3、解析 四、组合总和1、题目描述2、代码3、解析 五、字母大小写全排列1、题目描述2、代码3、解析 六、优美的排列1…

鸿蒙视频播放器,主要包括视频获取和视频播放功能:

鸿蒙视频播放器&#xff0c;主要包括视频获取和视频播放功能&#xff1a; 1 获取本地视频或者网络视频。 2 通过media.createAVPlayer创建播放器AVPlayer&#xff0c;然后进行视频播放。 3 通过VideoController进行AVPlayerState的状态管理&#xff0c;如开始&#xff0c;停止&…

2.15 字符串练习

1、选择题 1.1、有以下程序 int main() { char a[7]"a0\0a0\0";int i,j; isizeof(a); jstrlen(a); printf("%d %d\n",i,j); } //strlen求出字符串的长度&#xff0c;其实是字符串中字符的个数&#xff0c;不包括\0 程序运行后的输出结果是 C…

K210开发环境搭建(VS Code)

一、新建一个文件夹&#xff0c;就叫K210 二、再K210文件夹里面再新建一个文件夹&#xff0c;就叫CMake 三、找到官方提供的资料包里的cmake安装包&#xff0c; 或者直接去cmake官方下载网址进行下载 CMake官方下载网址&#xff1a;https://cmake.org/download/ 四、双击安装…

Screw自动生成数据库文档

Screw简介 官方地址 Screw可以根据数据库中的表自动生成HTML、Word、Markdown格式的文档。 Springboot 3.1集成 生成Springboot项目 Spring Initializr Maven依赖 <dependency><groupId>cn.smallbun.screw</groupId><artifactId>screw-core</…

Nginx实战:日志按天分割

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、方式1&#xff1a;定时任务执行分割脚本 1.分割日志脚本 2.添加定时任务 二、方式2&#xff1a;logrotate配置分割 1.logrotate简单介绍 2.新增切割ngi…

FT2232调试记录(3)

FT2232调试记录&#xff08;1&#xff09;: FT2232调试记录&#xff08;2&#xff09;: FT2232调试记录&#xff08;3&#xff09;: FT2232 SPI读写函数: 参照SPI提供的文档&#xff1a; 工程&#xff1a; SPI 写函数&#xff1a; FT_STATUS write_byte(FT_HANDLE handle…

再利用系统盘时,如何删除恢复分区(Recovery Partition)

系统盘有一个Recovery Partition&#xff0c;记录了重要的系统信息&#xff0c;不能删除。 Windows 10的 Disk Managment 不提供用户删除这个Partition的选项。 近日我插入一块原系统盘&#xff0c;Format后作为DataDisk&#xff0c;此时需要删除这块硬盘上的RecoveryPartition…

机器学习系列——(二十一)神经网络

引言 在当今数字化时代&#xff0c;机器学习技术正日益成为各行各业的核心。而在机器学习领域中&#xff0c;神经网络是一种备受瞩目的模型&#xff0c;因其出色的性能和广泛的应用而备受关注。本文将深入介绍神经网络&#xff0c;探讨其原理、结构以及应用。 一、简介 神经网…

【碎片知识点】安装Linux系统 VMware与kali

天命&#xff1a;VMware就是可以运行操作系统的载体&#xff0c;kali就是Linux的其中一个分支 天命&#xff1a;Linux有两个分支版本&#xff1a;centos与ubuntu&#xff0c;kali底层就是ubuntu&#xff08;所有Linux用起来都差不多&#xff0c;没啥区别&#xff09; 天命&…