Java Web——JS中的BOM

1. Web API概述

Web API 是指浏览器提供的一套接口，这些接口允许开发人员使用 JavaScript（JS）来操作浏览器功能和页面元素。通过 Web API，开发人员可以与浏览器进行交互，以实现更复杂的功能和效果。

1.1. 初识Web API

JavaScript语言有三部分组成，分别是ECMAScript、BOM、DOM，其中ECMAScript是JavaScript语言的核心，它的内容就是前面学到的基本语法、函数、对象这些。总的关系图如下

1.2. Web API 和 API 的关系

  1. API

API（Application Programming Interface，应用程序编程接口）是一种预先定义的函数或接口，由某个软件开放给开发人员使用，帮助开发者实现某种功能。API是给程序员提供的第一种工具，以便能更轻松的实现想要完成的功能。它隐藏了软件系统的内部工作机制细节，只暴露有限的接口给外部调用。

举个简单的例子：

假设你是一名开发人员，想要开发一个手机应用程序，让用户能够查询天气信息。你可以使用某个天气预报网站或API提供的接口，这样你就可以在应用程序中调用该接口来获取天气信息。这个天气预报网站或API提供了一个预先定义的函数或接口，例如“获取天气信息”（getWeatherInfo），它隐藏了内部工作机制的细节，只暴露了一个接口给外部调用。在你的应用程序中，你可以调用这个“获取天气信息”的接口，并提供一个城市名称作为参数。当你的应用程序调用这个接口时，它会返回该城市的天气信息，例如温度、天气状况等。通过使用这个天气预报网站或API的接口，你就可以轻松地实现获取天气信息的功能，而不需要自己编写所有的代码来查询天气信息。这样，你就可以将更多的时间和精力集中在开发应用程序的其他功能上。

  1. Web API

Web API 是针对浏览器的 API，它是由浏览器提供的接口，用于在 JavaScript 中与浏览器进行交互，以实现各种浏览器功能和页面元素的操作。

Web API 被封装成了对象，通常是全局对象，例如 `window` 或 `navigator` 等。这些对象具有一系列的属性和方法，开发人员可以通过调用这些属性和方法来使用 Web API。

例如，`window` 对象提供了一些与窗口和文档相关的属性和方法，例如 `alert()` 方法用于显示警告框，`document` 对象提供了一些与文档结构相关的属性和方法，例如 `getElementById()` 方法用于获取指定 ID 的元素。通过使用 Web API，开发人员可以控制浏览器的行为、操作页面元素、进行网络请求等各种功能。因此，Web API 是 JavaScript 在 Web 开发中非常重要的工具，它使得开发人员能够轻松地实现各种功能和效果。

2. DOM

2.1. DOM概念

DOM（Document Object Model）是一种编程接口，它将HTML文档中的每个标签元素都视为一个对象。这些对象具有许多属性和方法，可以通过编程操作这些属性或调用这些方法来动态更新HTML文档的内容、结构和样式，从而为网页特效和用户交互提供技术支持。

简单来说，DOM是一种用于修改HTML的动态技术，它的目的是在网页中实现交互式效果和用户交互。通过使用DOM，开发人员可以创建和修改网页中的元素，改变它们的属性、内容和样式，以及添加或删除网页中的节点和元素。这些操作可以动态地改变网页的内容和外观，从而实现各种交互式效果和用户界面设计。

比如下面这个例子：

上述的例子中当用户分分别点击【开始】或【结束】按钮后，通过右侧调试窗口可以观察到 html 标签的内容在不断的发生改变，这便是通过 DOM 实现的。

2.2. DOM树

DOM树（Document Object Model Tree）是指网页文档中所有元素的层次结构。在这个结构中，每个HTML标签、文本节点和属性都作为一个节点表示，形成一个树状结构。DOM树从网页的根节点（对应于HTML文档的`<!DOCTYPE html>`标签）开始，逐级向下表示网页的结构。每个节点都是一个对象，可以通过JavaScript或其他脚本语言进行访问和操作。

通过DOM树，网页开发者可以使用JavaScript和其他脚本语言来操作和修改网页中的各个元素，例如修改文本、属性、样式等。因此，DOM树在网页开发中扮演着非常重要的角色，它是网页的基础架构，为网页开发提供了强大的操作性和灵活性。

  1. DOM节点

DOM节点是文档树中的基本组成部分，每个节点都是一个DOM对象。在HTML文档中，节点可以包括元素节点、属性节点和文本节点等。

  1. 元素节点：这些节点对应于HTML标签，例如<head>、<div>、<body>等。它们表示HTML文档中的不同部分，如头部、主体和特定元素。
  2. 属性节点：这些节点是HTML标签属性的表示，如<a>标签的href属性或<div>标签的class属性。属性节点提供了关于元素的额外信息，例如元素的样式或行为。
  3. 文本节点：这些节点代表HTML标签中的文本内容，如<title>标签中的文字。文本节点允许开发人员修改和操作标签中的文本内容。
  4. 根节点：在HTML文档中，根节点特指<html>标签。它是整个文档的起点，其他所有节点都作为其子节点连接在其下面。
  1. DOM元素

DOM元素指的是页面中的所有标签。在DOM中，每个HTML标签都被视为一个对象，这些对象组成了DOM树。这使得开发人员可以通过编程方式来访问和操作页面中的元素，例如改变它们的属性、内容、样式等。通过DOM，开发人员可以创建和修改网页中的节点和元素，从而实现网页特效和用户交互。

2.3. 操作元素内容

在开发中，想要操作页面上的某个部分。比如控制一个div元素的显示或隐藏，现实中的例子就是，你要关掉某个页面显示的广告，你就点击广告的右上角的叉叉来关掉（隐藏）它。要实现这样的功能，就需要先获取到该部分对应的元素，再去进行操作。

2.3.1. 根据id获取元素

根据ID获取元素是指在DOM中通过元素的ID属性来获取对应元素的对象引用。DOM提供了document.getElementById()方法，它接受一个参数作为元素的ID，并返回对应元素的DOM对象。

<body>  <div id="myDiv">Hello, World!</div>  <button onclick="hideDiv()">Hide the Div</button>  <script>  function hideDiv() {  // 获取具有指定ID的元素对象  var divElement = document.getElementById("myDiv");  // 修改元素的样式为隐藏  divElement.style.display = "none";  }  </script>  </body>

在上面的示例中，我们有一个包含文本内容的div元素，它的ID为"myDiv"。我们还添加了一个按钮，当点击按钮时，会触发hideDiv()函数。这个函数使用document.getElementById()方法获取到具有指定ID的div元素对象，并将其样式的display属性设置为"none"，从而隐藏该元素。

通过这种方式，我们可以根据元素的ID来获取对应的DOM对象，并对其进行各种操作来改变页面的内容和样式。

2.3.2. 根据标签获取元素

根据标签名获取元素有两种，分别是通过document对象获取元素和通过element对象获取元素。

document.getElementsByTagName("+标签名");
element.getElementsByTagName("+标签名");

element是对元素对象的统称，通过元素对象可以查找该元素的子元素或后代元素，实现局部查找的效果。而document对象是从整个文档中查找元素。

<body><div id="parent"><p class="paragraph">段落1</p><p class="paragraph">段落2</p><span>标签元素</span></div><script>// 获取文档中的所有 p 元素var pElements = document.getElementsByTagName("p");console.log("文档中的 p 元素个数: " + pElements.length);// 获取 id 为 "parent" 的元素下的所有 p 子元素var parentElement = document.getElementById("parent");var pElementsUnderParent = parentElement.getElementsByTagName("p");console.log("在父元素下的 p 子元素个数: " + pElementsUnderParent.length);</script></body>

在上面的示例中，我们首先使用document.getElementsByTagName("p")获取文档中所有的p元素，并使用console.log()输出它们的数量。然后，我们使用document.getElementById("parent")获取ID为"parent"的元素，再使用element.getElementsByTagName("p")获取该元素下所有的p子元素，并使用console.log()输出它们的数量。

注意：方法名里面是elements意思是返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push( )等方法。

2.3.3. 根据name获取元素

通过name属性来获取元素使用document.getElementsByName( )方法，一般用于获取表单元素。

<body><p>请选择你最喜欢的水果(多选)</p><input type="checkbox" name="fruit" value="苹果">苹果</input><input type="checkbox" name="fruit" value="苹果">苹果</input><input type="checkbox" name="fruit" value="橘子">橘子</input><script>var fruits = document.getElementsByName("fruit");fruits[0].checked = true;</script></body>

浏览器一解析后显示的界面，苹果选项被选中了

  1. 通过 document.getElementsByName("fruit") 获取所有名为 "fruit" 的 input 元素并返回一个对象集合
  2. 使用索引获取元素，fruits[0].checked = true，将fruits的第一个元素的checked属性值设true。

2.3.4. HTML5新增的获取方式

2.3.4.1. 根据类名获取

使用document.getElementByClassName( )方法，用于通过类名来获得元素集合。

以下是一个简单的HTML5和JavaScript代码示例，演示如何使用 getElementsByClassName() 方法根据类名获取元素：

<body><div class="myClass">我是一个div元素</div>
<p class="myClass">我是一个p元素</p>
<span class="myClass">我是一个span元素</span><script>
// 使用getElementsByClassName方法获取类名为"myClass"的元素集合
var elements = document.getElementsByClassName("myClass");// 遍历元素集合并输出每个元素的类型
for(var i = 0; i < elements.length; i++) {console.log(elements[i].tagName);
}
</script></body>

  • 使用 getElementsByClassName() 方法获取这些元素，并使用for循环遍历它们。
  • 在循环中，使用 console.log() 输出每个元素的类型（例如 "div"，"p" 或 "span"）。
2.3.4.2. querySelector( ) & querySelectorAll( )

querySelector( )方法用于返回指定选择器的第一个元素对象。

querySelectorAll( )方法用于返回指定选择器的所有元素对象集合。

querySelector() 方法示例：

let element = document.erySelector('#myId');// 你可以检查返回的元素是否存在
if(element !== null){console.log(element);
} else {console.log('No element found with the given selector');
}

querySelector() 方法用于寻找 ID 为 "myId" 的元素。如果找到了，它返回该元素；如果没有找到，它返回 null。

querySelectorAll() 方法示例：

let elements = document.querySelectorAll('.myClass');// 你可以检查返回的元素集合是否存在并且是否包含元素
if(elements.length > 0){console.log(elements);
} else {console.log('No elements found with the given selector');
}

querySelectorAll() 方法用于寻找所有 class 为 "myClass" 的元素，并返回一个 NodeList 对象，其中包含所有匹配的元素。如果没有找到任何匹配的元素，那么返回的 NodeList 就是空的。

2.4. 事件

获取元素后，如果需要为元素条件交互行为，这就要用到事件来实现。

例如，当鼠标指针经过导航栏中的某一项时，自动展开二级菜单...诸如之类像这样的事件。

2.4.1. 事件概述

在JavaScript中，事件是指用户在与网页进行交互时发生的动作或操作，例如点击、鼠标移动、键盘输入等。这些事件对于开发者来说是非常重要的，因为它们可以让开发者在用户与网页交互时执行特定的代码，从而实现动态的、交互式的网页效果。

2.4.2. 事件三要素

  1. 事件源：触发事件的元素
  2. 事件类型：如click单击事件
  3. 事件处理程序：事件触发后要执行的代码(函数形式)，也称事件处理函数

上面三点，简单的解释就是“谁触发了事件”、“触发了什么事件”、“触发事件以后要做什么”

示例：

<body><button id="myButton">点击我</button><script>// 获取按钮元素var button = document.getElementById("myButton");// 指定事件处理程序button.addEventListener("click", function() {alert("按钮被点击了！");});</script>
</body>
  1. 事件源是ID为"myButton"的按钮元素。
  2. 事件类型是"click"，表示按钮被点击的事件。
  3. 事件处理程序是一个匿名函数，它会在按钮被点击时执行。在这个函数中，我们使用alert()函数弹出一个对话框，显示消息"按钮被点击了！"。

2.4.3. 常见事件

常见事件有很多，这里不可能全部一一列举的完，不然就太死板了。实际开发中更是需要用到怎样的事件就去找对应的事件属性，下图的超链接表可以参考，或者直接点官网查教程。

  • 鼠标事件

属性

描述

onclick

当用户点击某个对象时调用的事件句柄。

oncontextmenu

在用户点击鼠标右键打开上下文菜单时触发

ondblclick

当用户双击某个对象时调用的事件句柄。

onmousedown

鼠标按钮被按下。

onmouseenter

当鼠标指针移动到元素上时触发。

onmouseleave

当鼠标指针移出元素时触发

onmousemove

鼠标被移动。

onmouseover

鼠标移到某元素之上。

onmouseout

鼠标从某元素移开。

onmouseup

鼠标按键被松开。

  • 键盘事件

属性

描述

onkeydown

某个键盘按键被按下。

onkeypress

某个键盘按键被按下并松开。

onkeyup

某个键盘按键被松开。

  • 表单事件

属性

描述

onblur

元素失去焦点时触发

onchange

该事件在表单元素的内容改变时触发( , , , 和

onfocus

元素获取焦点时触发

onfocusin

元素即将获取焦点时触发

onfocusout

元素即将失去焦点时触发

oninput

元素获取用户输入时触发

onreset

表单重置时触发

onsearch

用户向搜索域输入文本时触发 ( <input="search">)

onselect

用户选取文本时触发 ( 和

onsubmit

表单提交时触发

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

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

相关文章

1.0 Zookeeper 教程

1.0 Zookeeper 教程

分类 Zookeeper 教程 ZooKeeper 是 Apache 软件基金会的一个软件项目&#xff0c;它为大型分布式计算提供开源的分布式配置服务、同步服务和命名注册。 ZooKeeper 的架构通过冗余服务实现高可用性。 Zookeeper 的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来&…
阅读更多...
数据分析 - 分散性与变异的量度

数据分析 - 分散性与变异的量度

全距 - 极差 处理变异性 方差度量 数值与均值的距离&#xff0c;也就是数据的差异性 标准差描述&#xff1a;典型值 和 均值的距离的方法&#xff0c;数据与均值的分散情况
阅读更多...
开发者生态：共享知识，携手共进，共创技术辉煌

开发者生态：共享知识，携手共进，共创技术辉煌

开发者生态&#xff1a;共享知识&#xff0c;携手共进&#xff0c;共创技术辉煌 在数字化时代&#xff0c;开发者是推动技术进步和创新的重要力量。他们创造着改变世界的软件和应用&#xff0c;推动着技术的边界不断向前。而在这个快速发展的时代&#xff0c;建立一个健康、活跃…
阅读更多...
MongoDB随记

MongoDB随记

MongoDB 1、简单介绍2、基本术语3、shard分片概述背景架构路由功能chunk&#xff08;数据分片&#xff09;shard key&#xff08;分片键值&#xff09; 4、常用命令 1、简单介绍 MongoDB是一个分布式文件存储的数据库&#xff0c;介于关系数据库和非关系数据库之间&#xff0c…
阅读更多...
JSON 格式的接口测试流程【Eolink Apikit】

JSON 格式的接口测试流程【Eolink Apikit】

在进行JSON格式的接口测试时&#xff0c;需要使用工具发送HTTP请求并获取响应。测试工具可以是单独的测试框架&#xff0c;如 Eolink Apikit。测试人员需要根据接口文档和测试用例编写测试脚本&#xff0c;然后运行测试并分析结果&#xff0c;以确保接口的质量和稳定性。 当我…
阅读更多...
UnitTest + Selenium 完成在线加法器自动化测试

UnitTest + Selenium 完成在线加法器自动化测试

1. 任务概述 利用 UnitTest 与 Selenium 编写自动化用例&#xff0c;测试在线加法器中的整数单次加法功能【如123 】 人工操作流程&#xff08;测试 12 是否等于 3&#xff09;&#xff1a; 打开在线加法器点击按钮1&#xff0c;再点击按钮&#xff0c;再点击按钮2&#xff0c…
阅读更多...
Linux 串口应用编程

Linux 串口应用编程

1 串口 API Linux串口通信&#xff1a; 在 Linux 系统中&#xff0c;操作设备的统一接口就是&#xff1a; open/ioctl/read/write 。 对于 UART &#xff0c;又在 ioctl 之上封装了很多函数&#xff0c;主要是用来设置行规程。所以对于 UART &#xff0c;编程的套路就是…
阅读更多...
LINUX入门篇【7】--git提交指令以及代码调试工具gdb

LINUX入门篇【7】--git提交指令以及代码调试工具gdb

前言&#xff1a; 我们今天来介绍一下我们工具篇的最后两个工具&#xff0c;即git提交指令以及代码调试工具gdb,再结合前面的知识点&#xff0c;我们就可以基本完成我们VS上的基本的功能&#xff1a;编写&#xff0c;调试&#xff0c;编译&#xff0c;执行程序的这些过程。 1…
阅读更多...
西南科技大学814考研一

西南科技大学814考研一

C语言基础 字节大小 char&#xff1a;1 字节 unsigned char&#xff1a;1 字节 short&#xff1a;2 字节 unsigned short&#xff1a;2 字节 int&#xff1a;通常为 4 字节&#xff08;32 位平台&#xff09;或 8 字节&#xff08;64 位平台&#xff09; unsigned int&#x…
阅读更多...
【FFmpeg实战】ffmpeg播放器-音视频解码流程

【FFmpeg实战】ffmpeg播放器-音视频解码流程

音视频介绍 音视频解码流程 FFmpeg解码的数据结构说明 AVFormatContext&#xff1a;封装格式上下文结构体,全局结构体,保存了视频文件封装格式相关信息AVInputFormat&#xff1a;每种封装格式&#xff0c;对应一个该结构体AVStream[0]&#xff1a;视频文件中每个视频&#xff…
阅读更多...
Java值传递和引用传递

Java值传递和引用传递

在Java中&#xff0c;有值传递&#xff08;Pass-by-Value&#xff09;和引用传递&#xff08;Pass-by-Reference&#xff09;两种参数传递方式。 值传递&#xff08;Pass-by-Value&#xff09;&#xff1a;当使用值传递方式时&#xff0c;方法将参数的副本传递给调用方法。这意…
阅读更多...
【Java】抽象类和接口

【Java】抽象类和接口

文章目录 一、抽象类1.抽象类的概念2.抽象类的语法3.抽象类的特性4.抽象类的作用 二、接口1.接口的概念2.语法规则3.接口的使用4.接口的特性5.实现多个接口6.接口间的继承7.接口的使用实例8.Clonable 接口和深拷贝9.抽象类和接口的区别 三、Object类1.获取对象信息2.对象的比较…
阅读更多...
Jmeter 如何监控目标服务的系统资源

Jmeter 如何监控目标服务的系统资源

下载Jmeter插件管理下载 perfmon 将这个插件管理放到Jmeter的\lib\ext目录下 然后重启Jmeter jmeter-plugins-manager-1.10.jar 下载 perfmon插件 添加 io 内存 磁盘的监听 并且添加监听 在宿主机中安装代理监听程序 并启动 ServerAgent.tar.gz
阅读更多...
UDP网络套接字编程

UDP网络套接字编程

先来说说数据在网络上的传输过程吧&#xff0c;我们知道系统其实终究是根据冯诺依曼来构成的&#xff0c;而网络数据是怎么发的呢&#xff1f; 其实很简单&#xff0c;网络有五层。如下&#xff1a; 如上图&#xff0c;我们知道的是&#xff0c;每层对应的操作系统中的那些地方…
阅读更多...
系列一、堆里面的分区：Eden、From、To、老年代各自的特点

系列一、堆里面的分区：Eden、From、To、老年代各自的特点

一、堆里面的分区&#xff1a;Eden、From、To、老年代各自的特点 堆是对象共享的区域&#xff0c;也是垃圾回收器主要工作的地方。主要分为新生区、养老区和元空间&#xff0c;而这三块地方中GC主要工作在新生区和养老区&#xff0c;其中新生区占1/3、养老区占2/3&#xff0c;新…
阅读更多...
《微信小程序开发从入门到实战》学习二十二

《微信小程序开发从入门到实战》学习二十二

3.3 开发创建投票页面 3.3.10 使用switch开关组件 用switch开关组件增加一个设置是否匿名投票的功能。 switch常用属性如下&#xff1a; checked 开还是关&#xff0c;默认false关 disabled 是否禁用&#xff0c;默认false不禁用&#xff0…
阅读更多...
openssl1.0.2版本Windows安装问题

openssl1.0.2版本Windows安装问题

之前安装过1.1版本&#xff0c;Windows环境下C 安装OpenSSL库 源码编译及使用&#xff08;VS2019&#xff09;_vs2019安装openssl_肥宝Fable的博客-CSDN博客 后来发现linux编译不过&#xff0c;以为是版本问题&#xff0c;相差太大&#xff0c;所以降一下版本&#xff0c;以免…
阅读更多...
NAS层协议栈学习笔记

NAS层协议栈学习笔记

NAS(Non-Access Stratum)是无线网络中非接入层及包括移动性管理(MM)和会话管理(SM)协议 &#xff0c;在5G(NR)系统中连接管理(Connection Management)用于建立和释放UE与AMF之间的控制面(CP)信令连接。 5G中移动性管理是通过NAS信令在UE与核心网之间进行交互的&#xff0c;连接…
阅读更多...
设计模式常见面试题

设计模式常见面试题

简单梳理下二十三种设计模式&#xff0c;在使用设计模式的时候&#xff0c;不仅要对其分类了然于胸&#xff0c;还要了解每个设计模式的应用场景、设计与实现&#xff0c;以及其优缺点。同时&#xff0c;还要能区分功能相近的设计模式&#xff0c;避免出现误用的情况。 什么是…
阅读更多...
第十一周任务总结

第十一周任务总结

本周任务总结 本周物联网方面主要继续进行网关的二次开发与规则引擎实现设备联动的实现 非物联网方面主要复习了docker的使用与算法的学习 1.网关的二次开发&#xff0c;本周将实现debug调试输出的文件下载到了网关&#xff0c;但网关出了问题无法连接&#xff0c;最终跟客服…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023