WebAPI-获取页面元素

最新推荐文章于 2023-03-28 12:24:54 发布
最新推荐文章于 2023-03-28 12:24:54 发布
阅读量155 收藏
点赞数
分类专栏： WebAPI 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HOO00oo/article/details/115917305
版权

1. WebAPI概念

1.1 API：Application Programming Interface,应用程序编程接口

◆ 简单的讲就是系统提供的预定义函数，供开发者使用，提升开发效率
◆ WebAPI：浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM）

1.2 DOM：Docuemnt Object Model（文档对象模型）

◆ DOM：网页加载时，浏览器会将整个html加载到内存，形成一个DOM树
◆ DOM树就是一个对象：document
◆ 利用DOM树，可以实现整个元素的操作
◆ 改变页面元素：html结构和属性
◆ 改变页面 样式：CSS
◆ 改变页面效果：用户交互
DOM树：
在这里插入图片描述

1.3 BOM：Browser Object Model（浏览器对象模型）

◆ BOM：系统提供的一套操作浏览器功能的API
◆ 利用BOM可以实现浏览器的相关操作，主要由几个对象来实现功能的管理

2. 获取页面元素

2.1 获取单个元素

方法：document.querySelector('选择器')

◆ 所有css选择器都可以用来获取元素
◆ querySelector()获取的是页面从上往下的第一个匹配到的元素

案例

<body>
        <div class="head">头部内容</div>
        <div id="content" class="content">主体内容</div>
        <div class="footer">
            <span>尾部内容</span>
        </div>
        <script>
            // JS获取单个元素：document.querySelector('选择器')

            // 认识document ==> 获取整个html页面元素
            console.log(document);

            // 具体获取元素 ==> 选择器
            // 类选择器：.类名
            let head = document.querySelector(".head");
            console.log(head);

            // 标签选择器：querySelector('标签') ==> 只会获取第一个标签元素
            let head1 = document.querySelector("div");
            console.log(head1);

            // 只要构成选择器的，都可以用来获取元素
            // 获取id选择器元素：document.querySelector("#id");
            let content = document.querySelector("#content");
            console.log(content);

            // 后代选择器
            let footer = document.querySelector(".footer span");
            console.log(footer);
        </script>
    </body>
2.2 获取多个元素

方法：document.querySelectorAll('选择器')

◆ 所有css选择器都可以用来获取元素
◆ querySelectorAll()获取的是多个元素，使用伪数组存储
◆ NodeList对象存储
◆ 即使只有1个元素或者没有元素都是伪数组
◆ 可以使用forEach()进行遍历

案例

<body>
        <div class="news">
            <ul>
                <li><a href="#">两会正式开幕1</a></li>
                <li><a href="#">两会正式开幕2</a></li>
                <li><a href="#">两会正式开幕3</a></li>
            </ul>
        </div>
        <script>
            let news = document.querySelector(".news");
            // 控制台打印整个div结构
            console.log(news);

            // querySelectorAll()获取的结果是伪数组
            let a = document.querySelectorAll(".news a");
            console.log(a);
            // 遍历伪数组a
            a.forEach(function (item) {
                // 依次打印出伪数组a中的元素
                console.log(item);
            });
        </script>
    </body>
HOO00oo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebAPI-获取页面元素（标签）的常用方法汇总
weixin_44486539的博客
11-11 1452
通过 ID 获取 语法： document.getElementById(id) 说明： document 表示当前文档对象，就是当前页面；每个载入浏览器的 HTML 文档都是 Document 对象 getElementById() Document 对象的一个方法，用于获取指定 id 的元素 id 该参数为 id 字符串；就是通过标签的 id 属性为标签设置的具有唯一性的标识（该属性值必...
WebAPIs获取元素
qq_44729619的博客
05-17 181
1.根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null <div id="time">2019-9-9</div> <script> // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 // 2. get 获得 element 元素 by 通过 驼峰命名法
Web页面获取元素方法-selenium3 UI自动化
qq_40207262的博客
03-28 930
selenium UI自动化元素定位方法大全
webapi把html内容传后端,WebApi的前端及后端调用
weixin_36322275的博客
06-08 275
WebApi前端调用HTML代码：备注：获取整张表的数据,使用for循环或foreach遍历// Ajax异步请求$(function(){$("#btnUserlist").click(function(){$.ajax({type:'get',//Http请求类型url:'https://localhost:44304/api/Values',// url:'https://localhost...
关于 document.querySelector
01-04 497
作用 返回第一个匹配指定选择器的文档DOM节点，按深度优先前序排列。 声明 element = document.querySelector(selectors); 其中 element 是一个DOM对象. selectors 是包含一个或者多个由逗号分隔的CSS选择器。字符串。 示例 在下面这个示例中，文档中第一个具有 myclass 类的DOM元素将会被返回: var e
web API- BOM.pdf
10-17
`reload` 方法可以用来重新加载页面，`location.reload(true)` 强制从服务器而不是缓存中获取页面。 ### 3. `navigator` 对象 `navigator` 对象提供了关于用户浏览器的信息，包括 `userAgent` 属性，它返回浏览器...
lab-webscraping-and-api-work-js
03-21
在本项目"lab-webscraping-and-api-work-js"中，我们将探讨如何使用JavaScript和React构建一个Web应用程序，该程序能够从美国疾病控制与预防中心（CDC）网站上抓取佛罗里达州的COVID-19数据。Puppeteer是Google ...
商业编程-源码-通过Web页面获取基站位置Web端源码.zip
06-23
【标题】"商业编程-源码-通过Web页面获取基站位置Web端源码.zip" 提供的是一款专门用于在Web应用程序中获取基站位置的技术实现。基站定位是移动通信技术中的一种定位方式，它利用手机与基站之间的信号交互来确定用户...
jstl-api-1.2.jar
04-18
3. **避免过多的脚本元素**：JSTL旨在减少JSP页面中的Java代码，所以尽量避免在页面中混用脚本片段。 4. **理解每个标签的作用**：熟悉每个JSTL标签的用法，避免误用导致的问题。 总结，`jstl-api-1.2.jar`是JSTL ...
EmlakUygulama:Google Maps API-JSP
05-05
在集成Google Maps API时，开发者需要获取API密钥，设置权限，然后在JSP页面中引入相应的JavaScript库。在JSP代码中，可能通过JavaScript或Ajax调用API，获取地图数据，动态地在网页上渲染地图。此外，还可以结合...
document.querySelector
qq_44709805的博客
11-08 3464
document.querySelector 这个document对象的querySelector是HTML5API新定义的方法 如果是id选择器传放一个参数“#id” id选择器返回这个节点元素对象 如果是class的选择器则传入一个".class" class选择器返回document节点或id节点元素对象中的第一个元素 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> &.
C#通过Win32 API操作IE浏览器 --- 获得IE的URL
Experience set us apart!
07-09 7334
        Windows操作系统是一个消息驱动的操作系统，所以要想操作Windows操作系统中的任何控件，都可以用消息来进行。Windows操作系统开放了大量的API给用户，用户可以通过这些API从底层来操作Windows系统中的控件，并且是以消息的方式进行的，下面以C#通过Win32 API来操作IE浏览器 --- 获得IE的URL为例: 至于API消息函数的原型，可以在MSDN中查到，至
javascript中DOM扩展
weixin_47450807的博客
03-09 264
javascript中DOM扩展 一、selectors API document.querySelector() 其中可以是标签名，类名，id名。 document.querySelectorAll() 其中也可以传入标签名，类名，id名。其最终传出的是一个HTMLCollection,是一个类数组。所以可以对其进行遍历。 //三种遍历方式 for(let i = 0 ;i<div.length;i++){ div[i].className = "name"; }
Dom Api之获取元素
温大侠的博客
07-10 309
Dom,全名Document object model,文档对象模型,我们打开的一个网页,可以看做一个文档,网页中的标签可以看做是文档中的元素,h5中的标签、标签文本内容、标签属性、注释可以看做节点,在js中可以使用一些api来操作这些节点以帮助我们实现某些功能.下面看一下dom中经常使用的一些获取元素的api. 1.getElementById. 如果给标签添加一个id,可以通过document.getElementById(id)的方式来获取到这个标签元素. <!DOCTYPE html&
web页面元素的8种定位方法
热门推荐
weixin_33737774的博客
04-18 2万+
一、web页面元素定位工具介绍 1、打开google浏览器，按F12进入开发者模式，如下图： 2、用鼠标点击下图红色框中的箭头——然后鼠标移动到web页面的元素上（此处为百度框），会自动定位到对应的html代码，如下图： 二、web页面元素的8种定位方法: 1、通过元素的id属性来定位元素——id是唯一标识（每个id都是不一样的） driver.find_elem...
document.querySelector()方法
u010227042的博客
09-09 7065
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <
asp.net WebApi 返回html页面
日志
08-24 7681
asp.net WebApi 返回html页面 public HttpResponseMessage Get(string id) { if (id.Contains("OID=")) { id = id.Replace("OID=", ""); } ...
动态创建iframe页面内容
lihefei_coder的博客
04-13 1万+
<!DOCTYPE html> <html> <head> <title>动态创建iframe页面内容</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" co...
uni web-view获取页面元素
最新发布
04-24
2. 在UniWebView的JavaScript代码中，使用DOM API来获取页面元素。 例如，要获取页面中ID为“elementID”的元素，可以使用以下代码： var element = document.getElementById("elementID"); 3. 将获取到的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值