querySelector()和querySelectorAll() ,你知道CSS 选择器吗？

最新推荐文章于 2024-08-28 14:41:59 发布

丁老师的技术随笔

最新推荐文章于 2024-08-28 14:41:59 发布

阅读量1.1k

点赞数

分类专栏：教学授课-javascript 文章标签： querySelector querySelectorAll

本文链接：https://blog.csdn.net/qustdjx/article/details/80161710

版权

教学授课-javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>