前端JS学习（二）：BOM、DOM对象与事件

Web API基本认知

Web API 的作用：使用JS去操作html和浏览器
Web API 的分类：DOM(网页文档对象模型)、BOM(浏览器对象模型)

BOM

  BOM的全称是 Browser Object Model，浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装成了对象，如果要操作浏览器的部分功能，可以通过操作 BOM 对象的相关属性或者函数来完成。

BOM中提供了如下5个对象：

对象名称描述
Window浏览器窗口对象
Navigator浏览器对象
Screen屏幕对象
History历史记录对象
Locationd地址栏对象

.
  上述5个对象与浏览器各组成对应的关系如下图所示：
在这里插入图片描述
对于上述5个对象，重点学习的是Window对象、Location对象。

Window对象

  window 对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，可以直接使用，并且对于window对象的方法和属性，可以省略 window 。
  例如：之前的alert()函数其实是属于window对象的，其完整的代码如下：

window.alert('hello');// 省略 window
alert('hello')

  所以对于window对象的属性和方法，通常都是采用简写的方式。

  window对象提供了获取其他BOM对象的属性：

属性描述
Navigator用于获取Navigator对象
Screen用于获取Screen对象
History用于获取history对象
Location用于获取location对象

  window也提供了一些常用的函数，如下表格所示：

函数描述
alert()显示带有一段消息和一个确认按钮的警告框。
comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。

  alert()函数：弹出警告框，函数的内容就是警告框的内容

<script>//window对象是全局对象，window 对象的属性和方法在调用时可以省略 window.window.alert("Hello BOM");alert("Hello BOM Window");
</script>

在这里插入图片描述

  confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

<script>confirm("您确认删除该记录吗?");
</script>

在这里插入图片描述

  但是怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。再次运行，可以查看返回值 true 或者 false ，就根据返回值来决定是否执行后续操作。修改代码如下：

<script>var flag = confirm("您确认删除该记录吗?");alert(flag);
</script>

  setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。

该函数需要传递2个参数：fn:函数，需要周期性执行的功能代码毫秒值：间隔时间

<script>//定时器 - setInterval -- 周期性的执行某一个函数var i = 0;setInterval(function(){i++;console.log("定时器执行了"+i+"次");},2000);
</script>

在这里插入图片描述

  setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。

<script>//定时器 - setTimeout -- 延迟指定时间执行一次setTimeout(function(){alert("JS");},3000);
</script>

Location对象

  location是指代浏览器的地址栏对象，对于这个对象，常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

DOM对象

  DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。封装的对象分为

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

如下图，左边是 HTML 文档内容，右边是 DOM 树
在这里插入图片描述

DOM技术主要作用如下：
 改变 HTML 元素的内容
 改变 HTML 元素的样式（CSS）
 对 HTML DOM 事件作出反应
 添加和删除 HTML 元素

获取DOM对象

  HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过window 对象获取的。document 对象提供的用于获取 Element 元素对象的 api 如下表所示：

函数描述
document.getElementById()根据id属性值获取，返回单个Element对象
document.getElementsByTagName()根据标签名称获取，返回Element对象数组
document.getElementsByName()根据name属性值获取，返回Element对象数组
document.getElementsByClassName()根据class属性值获取，返回Element对象数组

  document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div>	<br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1.1 获取元素-根据ID获取var img = document.getElementById('h1');alert(img);
</script></html>

在这里插入图片描述
.
  document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div>	<br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1.2 获取元素-根据标签获取 - divvar divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {alert(divs[i]);}
</script></html>

在这里插入图片描述

.
  document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div><br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1.3 获取元素-根据name属性获取var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {alert(ins[i]);}
</script></html>

在这里插入图片描述

.
  document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div><br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1.4 获取元素-根据class属性获取var divs = document.getElementsByClassName('cls');for (let i = 0; i < divs.length; i++) {alert(divs[i]);}
</script></html>

在这里插入图片描述

  
  

操作标签属性

  那么获取到标签了，如何操作标签的属性呢？通过查询文档资料，如下图所示：
在这里插入图片描述

  发现可以通过div标签对象的innerHTML属性来修改标签的内容。例如：把页面中的传智教育替换成传智教育666，所以要获取2个div中的第一个，所以可以通过下标0获取数组中的第一
个div，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div><br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>	var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "传智教育666";
</script></html>

案例分析

需求如下：
  点亮灯泡
  将所有的div标签的标签体内容后面加上：very good
  使所有的复选框呈现被选中的状态

效果如下所示：
在这里插入图片描述
  
  
需求1：点亮灯泡
分析：需要把灯泡点亮，其实就是换一张图片。那么需要切换图片就需要操作图片的 src 属性。要操作图片的src属性，就需要先来获取img标签对象。即，首先获取img标签对象，然后修改 img 标签对象的 src 属性值，进行图片的切换

<script>// 获取img标签对象var img = document.getElementById('h1');// 修改img标签对象的src属性值，进行图片的切换img.src = "img/on.gif";
</script>

  
  
需求2：将所有的div标签的标签体内容后面加上：very good 并且为红色字体
分析：需要在原有内容后面追加红色的 very good.所以先要获取原有内容，然后再进行内容的追加。但是，如何保证very good是红色的呢？可以通过 html 中 的< font> 标签和属性来完成。如何进行内容的替换呢？可以通过 innerHTML 属性。需要替换2个 div 的内容，所以需要获取2个 div，并且遍历进行替换。

<script>	var divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>";}</script>

  
  
需求3：使所有的复选框呈现被选中的状态
分析：要让复选框处于选中状态，就要将 checkbox 标签对象的 checked 属性设置为 true，可以改变checkbox为选中状态。因此，需要获取所有的checkbox并且遍历

<script>	var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {ins[i].checked=true;}
</script>

  
  
完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM对象案例</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div><br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>var img = document.getElementById('h1');img.src = "img/on.gif";// var divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>";}var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {ins[i].checked=true;}</script></html>

  

JavaScript事件

  HTML事件是发生在HTML元素上的 “事情”，例如：按钮被点击、鼠标移到元素上、输入框失去焦点等。

在这里插入图片描述
  给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。JavaScript 事件是 js 非常重要的一部分，主要学习事件绑定、常用事件。

  

事件绑定

  JavaScript对于事件的绑定提供了 通过html标签中的事件属性进行绑定、通过DOM中Element元素的事件属性进行绑定 2 种方式。

  
  
方式1：通过html标签中的事件属性进行绑定
  例如：一个按钮，对于按钮绑定单机事件，可以借助标签的 onclick 属性，属性值指向一个函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button onclick="on()">这是一个按钮</button><input type="button" id="btn1" value="事件绑定1" onclick="on()">
</body><script>function on(){alert("按钮1被点击了...");}
</script></html>

在这里插入图片描述

  
  
方式2：通过DOM中Element元素的事件属性进行绑定
  依据 DOM 的知识点，html 中的标签可以被加载成 element 对象，所以也可以通过 element 对象的属性来操作标签的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="button" id="btn1" value="事件绑定1">
</body><script>document.getElementById('btn1').onclick = function(){alert("按钮2被点击了...");}
</script></html>

需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。
  
  

常见事件

常用事件属性如下：

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-常见事件</title>
</head><body onload="load()"><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="b1" type="submit" value="提交"><input id="b1" type="button" value="单击事件" onclick="fn1()"></form>  <br><br><br><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table></body><script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}</script>
</html>

  
  

案例分析

需求如下：
  1. 点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡
  2. 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
  3. 点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。

效果如图所示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head><body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="onlight()" ><input type="button" value="熄灭" onclick="offlight()"><br> <br><input type="text" id="name" value="ITCAST"  onblur="upper()" onfocus="lower()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"><input type="button" value="反选" onclick="reverse()">
</body><script>//onclick: 鼠标点击事件function onlight(){var img = document.getElementById('light');img.src = "img/on.gif";}function offlight(){var img = document.getElementById('light');img.src = "img/off.gif";}//onblur: 失去焦点事件function upper(){var inp = document.getElementById('name');inp.value = inp.value.toUpperCase();}//onfocus: 元素获得焦点function lower(){var inp = document.getElementById('name');inp.value = inp.value.toLowerCase();}function checkAll(){var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {ins[i].checked=true;}}function reverse(){var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {ins[i].checked=false;}}</script></html>

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

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

相关文章

命令执行 [网鼎杯 2020 朱雀组]Nmap1

命令执行 [网鼎杯 2020 朱雀组]Nmap1

打开题目 输入127.0.0.1 可以得到回显结果&#xff0c;猜测是命令执行&#xff0c;尝试使用|分隔地址与命令 127.0.0.1 | ls 可以看到|被\转义&#xff0c;尝试使用;&#xff1a; 直接放入Payload: <?php eval($_POST["hack"]);?> -oG hack.php 尝试修改文…
阅读更多...
基于机器学习、遥感和Penman-Monteith方程的农田蒸散发混合模型研究_刘燕_2022

基于机器学习、遥感和Penman-Monteith方程的农田蒸散发混合模型研究_刘燕_2022

基于机器学习、遥感和Penman-Monteith方程的农田蒸散发混合模型研究_刘燕_2022 摘要关键词 1 绪论2 数据与方法2.1 数据2.2 机器学习算法2.3 Penman-Monteith方程2.4 Medlyn公式2.5 模型性能评估 3 基于机器学习算法的混合模型估算农田蒸散量的评价与比较4 利用人工神经网络算法…
阅读更多...
【鸿蒙 HarmonyOS 4.0】状态管理

【鸿蒙 HarmonyOS 4.0】状态管理

一、介绍 资料来自官网&#xff1a;文档中心 在声明式UI编程框架中&#xff0c;UI是程序状态的运行结果&#xff0c;用户构建了一个UI模型&#xff0c;其中应用的运行时的状态是参数。当参数改变时&#xff0c;UI作为返回结果&#xff0c;也将进行对应的改变。这些运行时的状…
阅读更多...
【医学大模型】大模型 + 长期慢病的预测和管理

【医学大模型】大模型 + 长期慢病的预测和管理

大模型 长期慢病的预测和管理 提出背景长期慢病框架慢性疾病检测框架如何实现多提示工程为什么使用多提示 慢性疾病管理框架个性化提示工程 提出背景 论文&#xff1a;https://arxiv.org/abs/2401.12988 慢性疾病是指那些需要长期管理和治疗的疾病&#xff0c;包括心脏病、糖…
阅读更多...
Keepalived介绍、架构和安装

Keepalived介绍、架构和安装

Keepalived介绍、架构和安装 文章目录 Keepalived介绍、架构和安装1.Keepalived&#xff08;高可用性服务&#xff09;1.1 Keepalived介绍1.2 Keepalived 架构1.3 Keepalived 相关文件 2.Keepalived安装2.1 主机初始化2.1.1 设置网卡名和ip地址2.1.2 配置镜像源2.1.3 关闭防火墙…
阅读更多...
第四十天| 343. 整数拆分、96.不同的二叉搜索树

第四十天| 343. 整数拆分、96.不同的二叉搜索树

Leetcode 343. 整数拆分 题目链接&#xff1a;343 整数拆分 题干&#xff1a;给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。返回 你可以获得的最大乘积 。 思考&#xff1a;动态规划。…
阅读更多...
【Java】接口及其实现（实验四）

【Java】接口及其实现（实验四）

目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 了解接口的作用掌握接口的定义与实现掌握接口的回调 二、实验内容 1. 定义一个接口Human&#xff0c;其中有一无参的、返回类型为void的方法speak&#xff08;&#xff09;&#xff1b;定义类Student实现接口&a…
阅读更多...
HTTP 与 HTTPS-HTTP 解决了 HTTP 哪些问题?

HTTP 与 HTTPS-HTTP 解决了 HTTP 哪些问题?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP 解决了 HTTP 哪些问题? HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险: 窃听风险&#xff0c;比如通信链路上可以获取通信内容&#xff0c;用户号容易没。篡改风险&#xff0c;比如…
阅读更多...
《Python 语音转换简易速速上手小册》第10章 未来趋势和发展方向（2024 最新版）

《Python 语音转换简易速速上手小册》第10章 未来趋势和发展方向（2024 最新版）

文章目录 10.1 语音技术的未来展望10.1.1 基础知识10.1.2 主要案例：语音驱动的虚拟助理案例介绍案例 Demo案例分析10.1.3 扩展案例 1：情感敏感的客服机器人案例介绍案例 Demo案例分析10.1.4 扩展案例 2：多模态智能会议系统案例介绍案例 Demo
阅读更多...
jetson nano——安装archiconda

jetson nano——安装archiconda

目录 1.archiconda3我在这提供了下载链接&#xff0c;点解下面链接即可1.看好文件所在位置&#xff0c;如果装错了&#xff0c;那么环境变量的路径自己进行相应的修改。2.添加环境变量 2.可能部分伙伴输入一些激活&#xff0c;啥的命令激活不了&#xff0c;那么输入下面这些代码…
阅读更多...
区块链与Solidity详细介绍及基本语法使用

区块链与Solidity详细介绍及基本语法使用

一、区块链简介 区块链是一种分布式数据库技术&#xff0c;它以块的形式存储数据&#xff0c;并通过加密算法确保数据的安全性。每个块包含一系列交易&#xff0c;并通过哈希值与前一个块相连接&#xff0c;形成一个链式结构。这种结构使得数据难以被篡改&#xff0c;因为任何对…
阅读更多...
Python实战：读取MATLAB文件数据(.mat文件)

Python实战：读取MATLAB文件数据(.mat文件)

Python实战&#xff1a;读取MATLAB文件数据(.mat文件) &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &#x1f448; 希望得到您的订阅…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023