<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JAVASCRIPT 基础</title>
<style>
input[type="text"]
{width:150px;display:block;margin-bottom:10px;background-color:yellow;
}
input[type="button"]
{width:120px;margin-left:35px;display:block;
}
</style>
</head>
<body><form name="input" action="demo-form.php" method="get">
Firstname:<input type="text" name="fname" value="Peter" size="20">
Lastname:<input type="text" name="lname" value="Griffin" size="20">
<input type="button" οnclick="getInput()" value="Example Button"></form><script>// querySelector 与 querySelectorAll 可以看做是DOM 操作与CSS选择器的紧密结合！// 通过querySelector 获得 button 元素
var button = document.querySelector('input[type="button"]');console.log(button.value)// 怎样去实现一点击按钮，弹出 输入框里面的内容，分为3部 // 1.点击按钮,一点击按钮就去执行一段JS 程序
function getInput(){// 2. 获得 输入框内容，firstname ，lastname var input = document.querySelectorAll('input[type="text"]');var firstname =input[0].value;var lastname = input[1].value;// 3. 把 firstname 和lastname 放到alert 里面alert(firstname+lastname) }</script>
</body>
</html> 详细解决方案
querySelector()和querySelectorAll() ,你知道CSS 选择器吗？
热度：63 发布时间：2023-12-13 12:38:46.0
相关解决方案
- querySelector & querySelectorAll - 像CSS一样选择DOM
- querySelector & querySelectorAll - 像CSS同样选择DOM
- querySelectorAll 研讨
- IE8不支持document.querySelectorAll()?解决思路
- IE8不支持document.querySelectorAll()?该如何解决
- document.querySelectorAll()选取元素列表的用法
- document.querySelector()选取指定元素的用法
- 正确地缩写 document.querySelector
- querySelector()和querySelectorAll() ,你知道CSS 选择器吗？
- javascript 选择器之 querySelector,querySelectorAll 学习
- js的Web API笔记1:DOM介绍、获取元素(根据id,标签名、class、queryselector、queryselectorAll、body、html)、事件基础、操作元素
- [Vue warn]: Error in mounted hook: “TypeError: element.querySelector is not a function“