JavaScript入门级经典函数（二）元素查找函数（下）

JavaScript入门级经典函数（二）元素查找函数（下）

前言

这里依旧是万物之恋，首先感谢大家对上一篇文章的支持，今天将元素查找函数剩下的内容讲完，希望大家多多提出意见建议，共同进步！

1.document.getElementsByName:通过name名查找元素

因为“name”属性命名大多数情况下只适用于input标签（水平有限只学过一种） ，所以先简单写一个form表单()

 <form method="post" action="#">
  姓名：<input type="text" name="username" placeholder="请输入姓名" />
    <br />
  密码：<input type="password" name="password" placeholder="请输入密码" />
    <br />
   <input type="submit" />
   <input type="reset" />
    </form>

注意设置“name”属性
整体样式如图：

接下来到script中使用：

 var user=document.getElementsByName("username");
 var psd=document.getElementsByName("password");

从“elements”的复数写法就可以得知，返回值同样属于伪数组，想要查找到元素，需要使用“变量名[下标]”的方式。

尝试一下：

console.log(user[0]);
console.log(psd[0]);

结果：

但到这里，我们需要明白一件事，使用到input标签的情况有很多种情况，但目的都是为了获取到用户的提交数据，而这个数据最后都是放在“value”中。
使用变量接收后，可以通过“变量名.属性名”的方式，来得到该变量的相应属性值。

结果呼之欲出：

 console.log(user[0].value);
 console.log(psd[0].value);

但使用后，发现依旧达不到我们想要的效果，甚至和之前毫无变化：


这是什么原因呢？
作为表单，提交的数据都应该提交到了下一个页面，也就是在“action”中应该填入的url地址，但是作为演示只有一个页面，自然无法获得数据。

难道数据就此消失了？

将提交方式改为“get”后，发现数据确实提交了。

那么有什么办法在当前界面获得提交数据呢？
结合下一个函数，我们就可以达到这个目的。

2.document.querySelector:选择器，获得一个元素

CSS选择器的使用方法有三种：
.class(类选择器)、#id(id名选择器)、Tag(标签选择器)；
使用规范遵循的是在CSS中查找不同元素的命名规则，效果相当于之前的函数。
属性选择器：[属性名=‘属性值’]
先随便写三行代码：

	<p>这是第一段话</p>
    <p id="said">这是第二段话</p>
    <p class="para">这是第三段话</p>

分别使用：

	  var p1=document.querySelector("p");
      console.log(p1);
      var p2=document.querySelector("#said");
      console.log(p2);
      var p3=document.querySelector(".para");
      console.log(p3);

结果：

3.document.querySelectorAll:选择器，获得多个元素

通过获得多个元素这一点可以明白，“querySelectorAll”同之前的带“elements”的函数一样，返回值都属于伪数组，定位元素都需要使用到下标:

	var pAll=document.querySelectorAll("p");
    console.log(pAll[0]);
    console.log(pAll[1]);
    console.log(pAll[2]);

结果：

从使用结果上来看，与“getElementsByTname”，“getElementsByClassName”以及“getElementsName”这三个函数并没有过多的区别，初学者如果疲于记忆，可以尝试只使用这一个函数来实现。

4.运用与总结

回到之前的问题，如何在只有一个页面的情况下获得自己提交的的数据？
先整理一下HTML部分代码：

<form method="get" action="#">
      姓名：<input type="text" name="username" placeholder="请输入姓名" />
      <br />
      密码：<input type="password" name="password" placeholder="请输入密码" />
      <br />
      <button>提交</button>
    </form>

注意，整理后我将按钮换成了普通的“button”按钮

其实，为了获得数据，只需要结合一下之前学到的函数，和刚才的选择器，具体代码如下：

	// 为了不冲突和美观，注释后重新定义了新的变量
    //1.使用：document.getElementsByName(),获得input输入框的value值
    var username = document.getElementsByName("username");
    var password = document.getElementsByName("password");
    // 2.使用Css选择器获得button按钮
    var button = document.querySelector("button");
    // 3.写一个点击事件
    button.onclick=function(){
   // 使用console.log()无法在控制台输出；改成alert()弹窗，也更加的直观
      alert(
        "姓名："+username[0].value+" 密码："+password[0].value
      )
    }

结果如图：

此方法目前只适用于弹窗输出数据，多有不足，望大家谅解！

作为第三篇分享的文章，文字内容部分我已经有了较为清晰的逻辑思维，但是技术力并不强，因此代码部分多有不足，望见谅，希望能和大家一起变得更加优秀！