document.queryselector和document.get
时间: 2023-07-06 22:08:03 浏览: 104
document.querySelector() 和 document.getElementsByTagName() 和 document.getElementById() 都是 JavaScript 中用于访问 DOM 元素的方法。
其中,document.querySelector() 可以根据 CSS 选择器返回匹配的第一个元素,而 document.getElementsByTagName() 可以返回一个元素列表,其中包含指定标签名称的所有元素。document.getElementById() 则返回页面上具有指定 ID 的元素。
例如,如果你想要获取页面上第一个 `<p>` 元素,可以使用以下代码:
```javascript
var firstParagraph = document.querySelector('p');
```
如果你想要获取页面上所有的 `<p>` 元素,可以使用以下代码:
```javascript
var allParagraphs = document.getElementsByTagName('p');
```
如果你想要获取页面上具有 ID 为 "myDiv" 的元素,可以使用以下代码:
```javascript
var myDiv = document.getElementById('myDiv');
```
相关问题
<%@ 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文件。
查找错误点<script> var mcText = document.querySelector(`.mcText`) var accountedText = document.querySelector('.accountedText') var passwordText = document.querySelector('.passwordText') var registerDiv = document.querySelector('.registerDiv') var isAgree = false; //注册按钮的点击事件 registerDiv.onclick = function () { if(isAgree == true){ // history.back() var ajax = new XMLHttpRequest() var string = "mc="+mcText.value+"username="+accoundedText.value+'&password='+passwordText.value; ajax.open('get','http://localhost:8080/registUser?'+string) ajax.send() } else { alert("请输入名称账号密码") } } ajax.onload = function (){ console.log(ajax.responseText); } //监听这三个输入框失去焦点 mcText.onblur = function (){ isAgree = isAgreeLogin(); } accountedText.onblur = function (){ isAgree = isAgreeLogin(); } passwordText.onblur = function (){ isAgree = isAgreeLogin(); } //在失去焦点的时候,判断三个输入框是否都有值了,如果有则高亮显示,如果无则不亮 function isAgreeLogin() { if(mcText.value !='' && accountedText.value != ''&& passwordText.value != ''){ registerDiv.style.backgroundColor = "#648ceb" registerDiv.style.boxShadow = "2px 2px 2px #9eb8f6" return true } else { return false } } </script>
您的代码中应该把 `var ajax = new XMLHttpRequest()` 放到 `registerDiv.onclick` 的函数体内部,否则会造成 ajax 未定义的错误。
正确的代码应该是这样的:
```
var mcText = document.querySelector(`.mcText`);
var accountedText = document.querySelector('.accountedText');
var passwordText = document.querySelector('.passwordText');
var registerDiv = document.querySelector('.registerDiv');
var isAgree = false;
registerDiv.onclick = function () {
if (isAgree == true) {
var ajax = new XMLHttpRequest(); // 将此行代码放到函数体内部
var string = "mc=" + mcText.value + "username=" + accountedText.value + '&password=' + passwordText.value;
ajax.open('get', 'http://localhost:8080/registUser?' + string);
ajax.send();
} else {
alert("请输入名称账号密码");
}
}
ajax.onload = function () {
console.log(ajax.responseText);
}
mcText.onblur = function () {
isAgree = isAgreeLogin();
}
accountedText.onblur = function () {
isAgree = isAgreeLogin();
}
passwordText.onblur = function () {
isAgree = isAgreeLogin();
}
function isAgreeLogin() {
if (mcText.value != '' && accountedText.value != '' && passwordText.value != '') {
registerDiv.style.backgroundColor = "#648ceb";
registerDiv.style.boxShadow = "2px 2px 2px #9eb8f6";
return true;
} else {
return false;
}
}
```
请注意,这只是一种可能的解决方案。如果问题仍然存在,请提供更多上下文信息和完整的代码,以便我更好地帮助您。
阅读全文