HtmlPage querySelector

`querySelector`是HTML DOM（Document Object Model）API中的一个方法，它用于在HTML文档中根据CSS选择器查找并返回第一个匹配元素。这个方法通常在JavaScript中使用，尤其是在使用像jQuery或原生JavaScript操作DOM时。 `querySelector(String selector)`接受一个字符串参数，这个字符串是一个CSS选择器，比如`.class`, `#id`, 或者更复杂的表达式。它会搜索文档，并返回与该选择器匹配的第一个元素。如果找不到匹配的元素，`querySelector`将返回`null`。例如： ```javascript var element = document.querySelector('#myElement'); ``` 这里，`myElement`会被选为文档中ID为`myElement`的第一个元素。如果没有找到匹配的元素，`element`就会是`null`。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="/day08/js/axios.min.js"></script> </head> <body> 用户名：<input type="text" id="username"><br> 密码：<input type="password" id="password"> <span id="msg"></span> <button id="login">登录</button> <script> //获取元素 let loginBtn = document.querySelector("#login"); let usernameInput =document.querySelector("#username"); //先拿框，.value再获取框里的值,定义在函数外axios拿不到值，需放在函数里 // let username = document.querySelector("#username").value; // let password = document.querySelector("#password").value; //注册点击事件 loginBtn.onclick = function () { let username = usernameInput.value; let password = document.querySelector("#password").value; let msg = document.querySelector("#msg"); axios.get("/day08/login?username="+username+"&password="+password) //成功之和响应的值放在response中，自动调用函数 .then(response=>{ // 成功之后要执行的内容，js对象 msg.innerText =response.data; },error=>{ //因为网络等原因，传输失败执行这里的代码(404等不属于) }) } //当用户名在用户名失去焦点时，获取用户名 usernameInput.onblur = function () { let username =usernameInput.value; let msg = document.querySelector("#msg"); //独立功能，判断用户名是否重复 axios.get("/day08/usernameCheck?username="+username) .then(response=>{ console.log(response.data); if(response.data==200){ //通过js控制样式（颜色等） msg.style.color ="green"; msg.innerText ="可以正常注册"; }else{ msg.style.color ="red"; msg.innerText ="用户名太受欢迎，请重新输入"; } }) } </script> </body> </html>

这段代码是一个基本的前端登录页面，其中包括输入用户名和密码的输入框以及登录按钮。在点击登录按钮时，页面会向后端发送用户名和密码，如果验证成功，则会在页面上显示登录成功的信息，否则会显示登录失败的信息。另外，代码中还包括一个用户名输入框的失去焦点事件，当用户输入完用户名并离开输入框时，页面会向后端发送用户名，后端会返回一个状态码，根据状态码来判断用户名是否可用，并在页面上显示相应的提示信息。需要注意的是，这段代码中使用了Axios库来进行网络请求，所以需要在页面中引入Axios库的js文件。

Error occurred during the process: TypeError: product.querySelector is not a function at E:\test\auto_message\index.js:56:39

你遇到了一个`TypeError`，具体原因是`product.querySelector`不是函数。这通常意味着你在尝试调用一个非对象的属性作为函数，但在JavaScript中，只有对象实例才拥有方法（如`querySelector`）。在你的代码中，`product`可能是数组的一个元素，而不是DOM元素。检查一下这段代码： ```javascript const linkElement = product.querySelector('a'); // 这里 `product` 可能不是一个DOM元素 ``` 确保`product`已经正确解析为了一个HTML元素，例如通过之前的`await page.evaluate`、`page.$`或者其他获取DOM元素的方式。如果不是DOM元素，你可能需要先判断它是否可用，或者改变获取方式。修复这个问题的一种方法是将`product`转换成真正的DOM元素，如果是数组元素，可以尝试通过索引来获取对应的DOM元素，或者在循环之前先确认`products`是一个包含实际元素的数组，而非其他类型的数据。 ```javascript if (Array.isArray(product)) { if (product.length > index) { product = product[index]; // 如果产品是数组，则取指定索引的元素 } else { throw new Error('Invalid product index'); } } else if (typeof product === 'object' && product.nodeType === Node.ELEMENT_NODE) { // 如果产品是DOM元素，直接使用 } else { throw new Error('产品不是有效的DOM元素'); } // 现在 product 应该是一个有效的DOM元素，可以继续使用.querySelector const linkElement = product.querySelector('a'); ``` 请确保在运行这部分代码前，`product`已经按照预期进行了正确的处理。

阅读全文

HtmlPage querySelector

Error occurred during the process: TypeError: product.querySelector is not a function at E:\test\auto_message\index.js:56:39

相关推荐

创建动态投资组合页面的实践指南

网页图片显示与CSS JS编程解决方法

使用JavaScript进行页面搜索示例教程

nodemailer-htmlpage-parser:从 html 页面创建 nodemailer 配置

Web-Page:HTML，CSS和Vanilla JavaScript网站

landing-page

restaurant-page

Landing_page

warning-page

login_page

Restaurant-page

Crowdfunding-product-page:HTML CSS CSS Vanilla JS的众筹产品页面

thedocument_page

实现SPA登录验证与内容展示的技术细节

打造全屏滚动H5页面：JavaScript与CSS的实战技巧

大家在看

公安大数据零信任体系设计要求.pdf

AUTOSAR-MCAL -CanDriver-UserMAnnual

MTK_Camera_HAL3架构.doc

不平衡学习的自适应合成采样方法ADASYN附Matlab代码.zip

山东大学最优化方法期末整合（多套）

最新推荐

降低成本的oracle11g内网安装依赖-pdksh-5.2.14-1.i386.rpm下载

管理建模和仿真的文件

云计算术语全面掌握：从1+X样卷A卷中提炼精华

. 索读取⼀幅图像，让该图像拼接⾃身图像，分别⽤⽔ 平和垂直 2 种。要求运⾏结果弹窗以⾃⼰的名字全拼命名。

Java基础实验教程Lab1解析

"互动学习：行动中的多样性与论文攻读经历"

【OPC UA基础教程】：C#实现与汇川PLC通讯的必备指南

华三路由器acl4000允许源mac地址

前端开发基础三部曲：HTML、CSS、JavaScript实例教程

关系数据表示学习

. 索读取⼀幅图像，让该图像拼接⾃身图像，分别⽤⽔平和垂直 2 种。要求运⾏结果弹窗以⾃⼰的名字全拼命名。