10个项目带你成为初级前端工程师【项目3|精讲篇P2】

一口气把我要说的这两个东西全用了，我把狠话放这了。

hello大家好，我是写代码的Pig。一个打算用10个前端项目把你培养成初级前端工程师的男人。说完怎么引入js，说一下js怎么来操作网页。我大概能想到的有以下几种，其中用过的有两个。

·一个是可以监听网页上的事件，比如这个按钮的点击事件，这是一个。

·然后还可以通过操作greetButton，ID等于标签的按钮，就是html元素来操作网页。这是一个一条龙下来执行的事，其实是已经体现出我说的两个功能了，进行事件处理、操作网页上的内容。

·除了这些之外，还可以实现一些动画和特效，它可以结合CSS来实现。

·还可以进行网络交互，比如请求服务器拿点什么数据回来，这些数据现在不是静态的吗？也许每个人的数据都不一样，也可以拿到一些网络数据。

·或者也可以处理表单，比如平时上网要想在这个网站里头充点钱，就是得登录注册，它就是一个账号框、一个密码框加上一个登录按钮，就可以组成一个简单的表单。这个也可以通过js来处理表单。

·还可以去调用一些浏览器的其他功能，这个用的就比较少了，比如获取地理位置、访问摄像头。其实浏览器也可以调手机或者电脑上的摄像头去执行，比如在网页里进行视频通话也可以。

·还有就是可以推送一些通知。

·js第一点去操作浏览器元素，是使用get element ID其中一种方法。除了这种方法，有的时候需要操作同类型的或者是相似的多个元素。同类型是什么？比如现在这个p标签，在那个项目实战里也是，当时发现了这个页面有两个p标签，想改变里面的东西。

·还有就是相似的多个元素，这个也好理解，比如拥有同样class的相似的元素，就是这种，来写一个，在底下再加一个按钮复制，这就是一个普通按钮。右边现在可以实时的去看到它，把ID去掉，没有任何样式，很普通，点击click me。

·可以通过其他的方法，还是把之前写过的给了elements by class name，把之前这个项目实战里说的再巩固一下，再写一个p标签，这应该是页面上的第三个p标签，先不给它加任何属性，因为拿到的三个东西是从第零个开始，它的下标是2。

·要get的它，比如叫Click Button简写了document，点getelement by，可以这样一口气把我要说的这两个东西全用了，它是d，下标是一，getelements by tag name，它是button，它是下标1的button，addEventListener，加一个点击事件，有一个点击功能。

函数和变量定义什么的在下一节课去讲，不然东西会比较多。大家就先看讲到的这些，让它第二个elements by tag name，这个要是用p就没有意思了，class什么就普通的text可以吧？没问题。比如h1也是text，getelements by class name，点innerHTML等于You已经Click了，这儿一直摆着引script.js文件，把它删掉。

你好，欢迎来到我的网站，you已经Click了，就一下，把这两个方法也都给大家用一下。

·除了获取现有元素之外，有时候还需要根据需要动态的添加一些新内容，可以使用create element方法去创建一个元素，还需要调用其他的方法，把它们插入到html页面上，可以放到某个元素后边用appendChild，或者是放在某元素前面用insertBefore都可以。

·接着去敲一些代码，大家可以加深一些印象，创建一个div，定义一个变量，也有dip，后面会去讲定义变量的意义，这里边就需要定义变量，需要去赋一些值什么的。

·暂时先给个小悬念，先来用一下textContent，等于就是给div一些内容，比如叫this，new div，直接document在那哪儿里创建，getElementsByClassName，底下appendChild，这儿new div，getElementsByClassName，有了This is a new div，这就是在整个container div。

·最后appendChild加一个子元素，就加到了一个this is new div，再去前面加一个东西，就在个人简介上再加一个，把它缩小一点，这样方便看一些。

·开始，there first element child，这是第一个元素，应该是h1我的个人简介。

·再来document.getElementByld这个东西，点在它的前面放一个东西，这是什么意思？是这个叫container的div，到这是div里边调一个方法，叫往前面放东西，放什么？放new div，往前面放，这样做相当于是在一个class等于container的div底下调用一个往前插入element的方法，然后插入newdiv，在它的第一个元素前面去插入，就是这个样子。