textarea标签点击后自动第一位开始输入_Chrome插件第二弹：开始动手！

之前写过一篇文章：

LeoNaN：利用chrome扩展，让浏览器执行我们的脚本​zhuanlan.zhihu.com

讲的是怎么把js打包成chrome插件。然后有同学来问，那脚本怎么写～emmm。。。大概就描述一下，写给没有基础的同学～

首先呢，建议同学们看看这个，大概了解下HTML、JS、CSS都是干什么的：

LeoNaN：HTML5初窥一：HTML、CSS、JS都是啥？​zhuanlan.zhihu.com

chrome插件简单一点，其实就是用我们自己写的JS，去操作某个网站上的HTML。上面介绍的JS部分中，我其实也是利用JS修改了HTML的内容。那么这篇文章我就大概说一说，常用的简单的控制方法。

那么如何使用JS控制HTML呢？对于简单的情况来说，大体上来说就三步：0、梳理思路。1、把要操作的东东叫来。2、给这个东东捏脸。听起来好简单～下面我以某度所谓例子。

〇、梳理思路

这里用0开始数数真的不是我装，而是想在正式干活前说点别的。。。

chrome插件并不是什么神奇的魔法师，可以莫名其妙就能把活干了。实在点说，其实就是把我们手工在网页上做的工作，一步一步的用代码录下来，以后每次直接播放这段录像而已。所以我们真正开发之前，需要明确一下，实现这些功能，我们人工点击的话，都需要如何操作。比如说我要自动登录，那就分为三步：输入用户名、输入密码、点击登录按钮。再比如说我要自动抢会议室，那就是N步：刷新页面、看看会议室放没放出来、放出来了就填写资料并提交、没放出来就继续刷新。大概就是这个意思吧，后面才是真正的写脚本的时候。

---

一、把要操作的东东叫来。

1、在大喊“狗蛋快来！”之前呢，先介绍几个HTML里面起名字的方式，这样子我们才知道他叫什么名字呀～常用的几种方式如下：

a、id：大概类似我们的身份证号，原则上来说，一个网页内的id是不重复的。所以如果发现了咱们要找的东东有id，就可以非常准确的把他叫过来啦！

b、class：class字面意思是分类。比如说“三年二班”就是一个分类，这个分类下有好多好多同学。比如说“中国人”也是一个分类，一叫叫来了14亿。。。所以我们通过class去找人的话，一般来说会找来多个（1个或0个也当作多个好了），所以通过这种方式叫人的话，还需要在把他们都叫来之后，告诉他们，咱们其实是想叫第几个人。比如说我们会叫“来来来，三年二班站第四个的那位同学给我出来！”

c、name：这个name其实和class差不多，在HTML里面有其他的用处。不过对于叫名字来说，也可以拿来用用。

d、什么都没有：啥！什么都没有不是完犊子了。。。啊哈哈其实就算他什么名字都没有，我们还有一个大招：利用tag。啥是tag？说人话就是标签。我们看HTML代码里总有<>这种尖括号，这个就是标签。HTML的内容都会在某个标签里，所以就算他没有名字，我们也可以利用这个与生俱来的标签找到他。比如说：知乎里面拥有音乐标签的，第三个那个人过来让我关注一下。

2、举个例子

以某度为例，假如我要做个自动搜索。我们如何把需要的东东都叫来？

首先呢，先在chrome浏览器中打开某度的网址，打开之后大概是这个样子：

很明显就能知道，这里我们需要叫过来的东东有哪些：文字输入框、搜索按钮。这里有一个小技巧：鼠标移动到想要的东东上面，点击右键。如图：

点击检查（不同版本的浏览器这里不一样，有的是“审查元素”）。点击之后就发现浏览器多了一个框框（虽然出现的位置可能与我的不一样），如图：

这个框框里默认有一段是蓝色的背景，这个地方对应的就是网页中的输入框啦～看看这里的内容，为了方便看我复制一下：

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

那怎么叫这个东东过来呢？仔细看看，竟然id和class都有！那显然用id叫会比较准确一点，毕竟都有唯一的身份证号了我还用class叫来一群干啥= =

同理，搜索按钮也可以右键看一看：

<input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">

是不是也有id？完美。

好了那么下面就是那种不用理解，但是会用就凑合可以搞的部分：

这几种点名方式用代码怎么写？假设目标是输入框，我们起个名字叫shurukuang：

ID：var shurukuang = document.getElementById("kw");

CLASS：var shurukuang = document.getElementsByClassName("s_ipt")[0];（注意后面的0，表示是有这个class的第一个人。因为class可以重复，所以最好在console——即右键出现的框框里有一个叫console的标签——里执行一下，依次找找到底第几个class是我们需要的）

比如这个比较简单，第一个就是，所以后面写0.

NAME：var shurukuang = document.getElementsByName("wd")[0]; name与class类似。

TAG：var shurukuang = document.getElementsByTagName("input")[0]; tag也要看是第几个。

那后面的搜索按钮，我就直接用最简单的ID去叫了：

var anniu = document.getElementById("su");

到这里，我们就完成了第一步。

---

二、给这个东东捏脸

这步是什么意思呢，就是说，我们要开始对这个东东进行一些改变。比如我们如果想自动搜索的话，其实就两个动作：改变输入框的值、点击提交按钮。所以我们依次改变shurukuang和anniu。

1、改变shurukuang里面的值：

shurukuang.value="作者为什么这么帅？";

如果执行成功的话，大概就是这个效果。

不过这里需要注意的是，input标签是通过value修改的，其他的标签不一定。。。比如textarea是innerHTML，select是value，radio是checked等等。所以遇到要修改的标签，还是百度一下比较好～

2、点击anniu这个按钮：

这个其实很简单，有现成的方法：

anniu.click();

其实百度在我们修改完输入框后就会自动搜索了。。。但是没关系，反正以后会用到这个= =

3、扩展：

其实如果有一些HTML基础的话，我们甚至可以在网页里在插入一个小页面，当做设置用。比如说刷新频率啊，或者要填写的内容啊，登陆用户密码啊之类的，然后存在本地的localStorage里，自动化脚本跑的时候再去读取配置。这块说实话要是我自己用我都懒得写，只有打包给别人时候才写= =自己用就直接改代码了= =

---

三、最后：

总结一下，实现自动搜索的所有代码如下：

var shurukuang = document.getElementById("kw");

var anniu = document.getElementById("su");

shurukuang.value="作者为什么这么帅？";

anniu.click();

只有四行，甚至还可以变成两行：

document.getElementById("kw").value="作者为什么这么帅？";

document.getElementById("su").click();

哇这个例子真的好简单。。然而真实情况要改的东东一般都比较多= =不过大概原理差不多，还好还好。。。

接下来呢，就是想办法让浏览器可以自动的执行我们下的代码，可以打包成chrome插件，这样浏览器就会自动执行啦～详见我的另一篇文章（好像开头放过链接了，就这样吧懒得删了）：

LeoNaN：利用chrome扩展，让浏览器执行我们的脚本​zhuanlan.zhihu.com

如果看完这篇文章，觉得自动脚本好智障做不了什么的话，可以看看这篇文章：

LeoNaN：干货：用js实现的简单验证码识别​zhuanlan.zhihu.com

是的，这个东东大的方面帮网友抢过房子，小的方面也可以打个卡啥的。。。

PS：我只是好玩，啥都没干过 = =

以上～