Web APIs 学习归纳1---Web API概述简单的元素获取

       JS基础中我们学习了JS的基本语句,这些是后续学习中的基础。

        有了上述JS的基础以后,我们就可以开始学习交互效果的实现方法。这里很多时候直接调用JS封装好的API即可。

一、Web APIs 和 JS 基础关联性

        这里有一张图很好的解释了这个问题:

         我们前期学习的是JS的基础语法,现在学习的是基于JS语法的API的使用。

二、API 和 Web API

2.1 API

        API这个词大家可能在学习的过程中也听过,但是可能不是很清除,这里对API加以解释。

        API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序 与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

2.2 Web API

        Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

        可以参考      https://developer.mozilla.org/zh-CN/docs/Web/API

三、DOM

3.1 什么是DOM

        文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式

3.2 DOM

       我们自上而下分析这个图:

        文档:一个页面就是一个文档(整个 .html 文件),DOM 中使用 document 表示

        元素:页面中的所有标签都是元素,DOM 中使用 element 表示。后续我们需要学会获取。

        节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示

        DOM 把以上内容都看做是对象

3.3 获取元素---根据 ID 获取(返回一个对象)

        使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');

        举例,选取有id的标签对象:

<body><div id="time">2024-4-23</div><script>var Timer = document.getElementById('time');console.log(Timer); //选出id的标签</script>
</body>

3.4 获取元素---根据标签名获取(返回带有指定标签名的对象的集合)

        使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

        这里同样使用一个例子,抓取所有  <li>  标签。 

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><ol id="ol"><li>11</li><li>22</li><li>33</li><li>44</li></ol><script>// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li');//返回一个数组for (let i = 0; i < lis.length; i++) {console.log(lis[i]);}//2.选择id=ol下的livar ols = document.getElementById('ol'); // 获取 父元素对象console.log(ols.getElementsByTagName('li'));</script>
</body>

        我们注意到:

        1、document.getElementsByTagName('li');

        这里得到的是文档下所有的 <li> 标签

        //这里得到的是文档下所有的 <li> 标签 var lis = document.getElementsByTagName('li');

        2、因为是数组所以使用 lis[i] 调用

        3、ols.getElementsByTagName('li')

        这里得到的是ols对象内部的所有<li>

3.5 获取元素---通过 HTML5 新增的方法获取

        1、document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合

        注意:对比之前的ID获取,id好比身份证号所以只返回一个。但是类名获取可以获取很多,得到的就是集合。

        2、document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

        注意:1、类型  :  .classanme   2、id :    #idname

        3、document.querySelectorAll('选择器'); // 根据指定选择器返回

        注意:对比document.querySelector,这里获取的是集合

document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回

3.6 获取元素---特殊元素的获取

        刚才讲的都是我们经常使用的标签,但是<html><body> 我们一般不去人为修改,但是我们还是要学习一下获取方式:

        1、获取body元素

doucumnet.body // 返回body元素对象;

        怎么理解:1、document是body的父亲。2、body只有一个所以不用类名获取,直接封装一个body。

        2、获取html元素

        专属的一个记住就好。

document.documentElement // 返回html元素对象

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

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

相关文章

python高校贫困学生资助奖学金管理系统vue+django

我们根据项目文档&#xff0c;包括规格说明、文档及在设计过程中形成的测试大纲、测试内容及测试的通过准则、再次全面熟悉系统&#xff0c;做好测试准备。为了保证测试的质量&#xff0c;我们将测试过程分为几个阶段。第一阶段&#xff0c;在单元测试阶段我们对每个子模块进行…

可视化+多人协同技术原理和案例分享

前言 hi&#xff0c;大家好&#xff0c;我是徐小夕&#xff0c;之前和大家分享了很多可视化低代码的技术实践&#xff0c;最近也做了一款非常有意思的文档搭建引擎——Nocode/Doc&#xff1a; 也做了一些分享&#xff1a; Nocode/Doc&#xff0c;可视化 零代码打造下一代文件编…

SpringBoot+vue开发记录(二)

说明&#xff1a;本篇文章的主要内容为SpringBoot开发中后端的创建 项目创建: 1. 新建项目&#xff1a; 如下&#xff0c;这样简单创建就行了&#xff0c;JDK什么的就先17&#xff0c;当然1.8也是可以的&#xff0c;后面可以改。 这样就创建好了&#xff1a; 2. pom.xml…

js修改路由参数+vue——js基础

最近在写看板&#xff0c;要求执行某个操作后更改路由参数&#xff0c;方便用户保存地址以便于下次直接获取对应的数据。 比如&#xff1a;原地址&#xff1a;http://localhost:4200/tvType/out 执行某个操作后&#xff0c;地址变更为&#xff1a;http://localhost:4200/tvTyp…

IP地址 0.0.0.0 和 127.0.0.1之间的区别

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

应用回归分析,R语音,逐步回归法,第5章

library(readr) data3_1 <- read_csv("data3.1.csv")View(data3_1) lm5<-lm(y~.,data=data3_1) lm6<-step(lm5,direction = "both") summary(lm6) 输出: Start: AIC=377.73 y ~ x1 + x2 + x3 + x4 + x5 + x6 + x7 + x8 + x9Df Sum of Sq …

ChatGPT全方位指导:学术论文写作从零开始,轻松搞定高质量论文!

目录 文末福利 一、论文选题的深度探讨 二、撰写摘要的艺术 三、关键词的精选 四、引言的构建 五、正文的结构设计 六、撰写结论的策略 七、致谢的编写 八、附录的有效利用 九、参考文献的整理 文末有福利哦 撰写一篇高质量的学术论文是一项既复杂又耗时的任务。这个…

Android TV 桌面图标闪

<?xml version"1.0" encoding"utf-8"?> <!-- Copyright (C) 2014 The Android Open Source ProjectLicensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the Lice…

MongoDB数据恢复—拷贝MongoDB数据库文件后无法启动服务的数据恢复案例

服务器数据恢复环境&#xff1a; 一台Windows Server操作系统服务器&#xff0c;服务器上部署MongoDB数据库。 MongoDB数据库故障&检测&#xff1a; 工作人员在未关闭MongoDB数据库服务的情况下&#xff0c;将数据库文件拷贝到其他分区。拷贝完成后将原MongoDB数据库所在分…

8个拿来即用的Python自动化脚本!

每天你都可能会执行许多重复的任务&#xff0c;例如阅读新闻、发邮件、查看天气、清理文件夹等等&#xff0c;使用自动化脚本&#xff0c;就无需手动一次又一次地完成这些任务&#xff0c;非常方便。而在某种程度上&#xff0c;Python 就是自动化的代名词。 今天分享 8 个非常…

医学影像增强:空间域方法与频域方法等

医学影像图像增强是一项关键技术,旨在改善图像质量,以便更好地进行疾病诊断和评估。增强方法通常分为两大类:空间域方法和频域方法。 一、 空间域方法 空间域方法涉及直接对医学影像的像素值进行操作,以提高图像的视觉质量。以下是一些常用的空间域方法: 对比度调整:通过…

html实现点击按钮时下方展开一句话

你可以使用 HTML、CSS 和 JavaScript 来实现点击按钮时展开一句话的效果。下面是一个简单的实现示例&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content&qu…

《逍遥游·六十八拐》

五月阳光映大观&#xff0c;艳丽队服身上穿。海埂西门集合后&#xff0c;蓝光城外相谈欢。 松茂水库映蓝天&#xff0c;阳宗镇上舞蹁跹。 六十八拐道崎岖&#xff0c;一鼓作气意志坚。 宜良宿&#xff0c;夜幕深&#xff0c;梦中山水情相牵。待破晓&#xff0c;新日升&#xf…

mongodb 分片集群认证

增加认证 副本间认证外部使用认证 如果是开启状态,先关闭路由,再关闭配置服务,最后关闭分片数据复本集中的每个mongod&#xff0c;从次节点开始。直到副本集的所 有成员都离线&#xff0c;包括任何仲裁者。主节点必须是最后一个成员关闭以避免潜在的回滚.最好通过 db.shutdow…

janus模块介绍-SIP Gateway

模块启动 默认的SIP GateWay也是https协议&#xff0c;端口为8088或者8089 如果需要在自己搭建的测试服务上测试SIP GateWay模块&#xff0c;则也需要修改为wss 具体改动如下: 找到/opt/janus/share/janus/demos/siptest.js var server "wss://" window.location…

比较好的平民衣服品牌有哪些?平价质量好短袖品牌推荐

随着气候变暖&#xff0c;夏天的持续时间似乎越来越长&#xff0c;短袖作为夏季的必备服装&#xff0c;受到了广大男士的青睐。然而&#xff0c;面对市场上众多的短袖品牌和不同的质量&#xff0c;大家都觉得选短袖的时候实在难以找到质量好且合适自己的。 选择合适的短袖确实…

C++面向对象:重写、重载、隐藏

重载、重写、隐藏的区别 重载&#xff1a;同一类中定义的同名成员函数存在重载关系&#xff0c;函数名相同&#xff0c;参数类型和数目不同&#xff0c;重载和函数是否是虚函数无关。 class A{...virtual int fun();void fun(int);void fun(double, double);static int fun(c…

第59篇:创建Nios II工程之控制LED<一>

Q&#xff1a;还记得第1篇吗&#xff1f;设计简单的逻辑电路&#xff0c;控制DE2-115开发板上LED的亮与熄灭&#xff0c;一行Verilog HDL的assign赋值语句即可实现。本期开始创建Nios II工程&#xff0c;用C语言代码控制DE2-115开发板上的LED实现流水灯效果。 A&#xff1a;在…

VPP 中注册的node是如何被调用起来的

当我们在VPP/plugins目录下注册了自己的node后&#xff0c; 肯定有一个node.func(), 那这个函数是如何执行到的呢&#xff1a; 1. 首先我们要看一下这个插件注册的时候做了什么&#xff0c; 假设node 如下&#xff1a; 编译成功后&#xff0c; 我们可以从函数vlib_plugin_earl…

回归与聚类——K-Means(六)

什么是无监督学习 一家广告平台需要根据相似的人口学特征和购买习惯将美国人口分成不同的小 组&#xff0c;以便广告客户可以通过有关联的广告接触到他们的目标客户。Airbnb 需要将自己的房屋清单分组成不同的社区&#xff0c;以便用户能更轻松地查阅这些清单。一个数据科学团队…