> 本文最初发表于[博客园](),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。 > 以下是正文。 ## 前言 ### JavaScript的组成 JavaScript基础分为三个部分: - ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 - **DOM**:文档对象模型,操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。 - **BOM**:浏览器对象模型,操作**浏览器部分功能**的API。比如让浏览器自动滚动。 ## 事件 > JS是以**事件驱动为核心**的一门语言。 ### 事件的三要素 **事件的三要素:事件源、事件、事件驱动程序**。 比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯的开和关。 再比如,网页上弹出一个广告,我点击右上角的`X`,广告就关闭了。这件事情里,事件源是:`X`。事件是:onclick。事件驱动程序是:广告关闭了。 于是我们可以总结出:谁引发的后续事件,谁就是事件源。 **总结如下:** - 事件源:引发后续事件的html标签。 - 事件:js已经定义好了(见下图)。 - 事件驱动程序:对样式和html的操作。也就是DOM。 **代码书写步骤如下:**(重要) - (1)获取事件源:document.getElementById(“box”); // 类似于Android里面的findViewById - (2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 }; - (3)书写事件驱动程序:关于DOM的操作。 最简单的代码举例:(点击box1,然后弹框) ```html
``` 常见的事件如下: ![](http://img.smyhvae.com/20180126_1553.png) 下面针对这事件的三要素,进行分别介绍。 ### 1、获取事件源的方式(DOM节点的获取) 获取事件源的常见方式如下: ```javascript var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二:通过 标签名 获得 标签数组,所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s ``` ### 2、绑定事件的方式 方式一:直接绑定匿名函数 ```html
``` 方式二:先单独定义函数,再绑定 ```html
``` 注意上方代码的注释。**绑定的时候,是写fn,不是写fn()**。fn代表的是整个函数,而fn()代表的是返回值。 方式三:行内绑定 ```html
``` 注意第一行代码,绑定时,是写的`"fn()"`,不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的,而是被识别成了**字符串**。 ### 3、事件驱动程序 我们在上面是拿alert举例,不仅如此,我们还可以操作标签的属性和样式。举例如下: 点击鼠标时,原本粉色的div变大了,背景变红: ```html
``` 上方代码的注意事项: - 在js里写属性值时,要用引号 - 在js里写属性名时,是`backgroundColor`,不是CSS里面的`background-Color`。 实现效果如下: ![](http://img.smyhvae.com/20180126_1720.gif) ### onload事件 > onload事件比较特殊,这里单独讲一下。 **当页面加载(文本和图片)完毕的时候,触发onload事件。** 举例: ```html ``` 有一点我们要知道:**js的加载是和html同步加载的**。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。 建议是:整个页面上所有元素加载完毕在执行js内容。所以,window.onload可以预防使用标签在定义标签之前。 ### 事件举例:京东顶部广告栏 ![](http://img.smyhvae.com/20180122_1020.png) 比如上面这张图,当鼠标点击右上角的`X`时,关掉整个广告栏,这就要用到事件。 代码实现如下: ```html
×
``` 注意最后一行代码,这种方式会替换旧类名,意思是,不管之前的类名叫什么,都会被修改。 ### 事件举例: 要求实现效果:当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片。 代码实现: ```html ``` ## DOM的介绍 ### 什么是DOM DOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。 ### 解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的**属性**。 ### DOM树(一切都是节点) DOM的数据结构如下: ![](http://img.smyhvae.com/20180126_2105.png) 上图可知,**在HTML当中,一切都是节点**:(非常重要) - **元素节点**:HMTL标签。 - **文本节点**:标签中的文字(比如标签之间的空格、换行) - **属性节点**::标签的属性。 整个html文档就是一个文档节点。所有的节点都是Object。 ### DOM可以做什么 - 找对象(元素节点) - 设置元素的属性值 - 设置元素的样式 - 动态创建和删除元素 - 事件的触发响应:事件源、事件、事件的驱动程序 ## DOM节点的获取 DOM节点的获取方式其实就是**获取事件源的方式**,在上一段已经讲到。这里再重复一下。 操作元素节点,必须首先找到该节点。有三种方式可以获取DOM节点: ```javascript var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二:通过 标签名 获得 标签数组,所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s ``` 既然方式二、方式三获取的是标签数组,那么习惯性是**先遍历之后再使用**。 特殊情况:数组中的值只有1个。即便如此,这一个值也是包在数组里的。这个值的获取方式如下: ```javascript document.getElementsByTagName("div1")[0]; //取数组中的第一个元素 document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素 ``` ## DOM访问关系的获取 DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。如下: ![](http://img.smyhvae.com/20180126_2140.png) 节点的访问关系,是以**属性**的方式存在的。 JS中的**父子兄**访问关系: ![](http://img.smyhvae.com/20180126_2145.png) 这里我们要重点知道**parentNode**和**children**这两个属性的用法。下面分别介绍。 ### 获取父节点 调用者就是节点。一个节点只有一个父节点,调用方式就是 ```javascript 节点.parentNode ``` ### 获取兄弟节点 **1、下一个节点 | 下一个元素节点**: > Sibling的中文是**兄弟**。 (1)nextSibling: - 火狐、谷歌、IE9+版本:都指的是下一个节点(包括标签、空文档和换行节点)。 - IE678版本:指下一个元素节点(标签)。 (2)nextElementSibling: - 火狐、谷歌、IE9+版本:都指的是下一个元素节点(标签)。 **总结**:为了获取下一个**元素节点**,我们可以这样做:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling,于是,综合这两个属性,可以这样写: ```javascript 下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling ``` **2、前一个节点 | 前一个元素节点**: > previous的中文是:前一个。 (1)previousSibling: - 火狐、谷歌、IE9+版本:都指的是前一个节点(包括标签、空文档和换行节点)。 - IE678版本:指前一个元素节点(标签)。 (2)previousElementSibling: - 火狐、谷歌、IE9+版本:都指的是前一个元素节点(标签)。 **总结**:为了获取前一个**元素节点**,我们可以这样做:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling,于是,综合这两个属性,可以这样写: ```javascript 前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling ``` **3、补充:**获得任意一个兄弟节点: ```javascript 节点自己.parentNode.children[index]; //随意得到兄弟节点 ``` ### 获取单个的子节点 **1、第一个子节点 | 第一个子元素节点**: (1)firstChild: - 火狐、谷歌、IE9+版本:都指的是第一个子节点(包括标签、空文档和换行节点)。 - IE678版本:指第一个子元素节点(标签)。 (2)firstElementChild: - 火狐、谷歌、IE9+版本:都指的是第一个子元素节点(标签)。 **总结**:为了获取第一个**子元素节点**,我们可以这样做:在IE678中用firstChild,在火狐谷歌IE9+以后用firstElementChild,于是,综合这两个属性,可以这样写: ```javascript 第一个子元素节点 = 节点.firstElementChild || 节点.firstChild ``` **2、最后一个子节点 | 最后一个子元素节点**: (1)lastChild: - 火狐、谷歌、IE9+版本:都指的是最后一个子节点(包括标签、空文档和换行节点)。 - IE678版本:指最后一个子元素节点(标签)。 (2)lastElementChild: - 火狐、谷歌、IE9+版本:都指的是最后一个子元素节点(标签)。 **总结**:为了获取最后一个**子元素节点**,我们可以这样做:在IE678中用lastChild,在火狐谷歌IE9+以后用lastElementChild,于是,综合这两个属性,可以这样写: ```javascript 最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild ``` ### 获取所有的子节点 (1)**childNodes**:标准属性。返回的是指定元素的**子节点**的集合(包括元素节点、所有属性、文本节点)。是W3C的亲儿子。 - 火狐 谷歌等高本版会把换行也看做是子节点。 用法: ```javascript 子节点数组 = 父节点.childNodes; //获取所有节点。 ``` (2)**children**:非标准属性。返回的是指定元素的**子元素节点**的集合。【重要】 - 它只返回HTML节点,甚至不返回文本节点。 - 在IE6/7/8中包含注释节点(在IE678中,注释节点不要写在里面)。 虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。 用法:(**用的最多**) ```javascript 子节点数组 = 父节点.children; //获取所有节点。用的最多。 ``` ### nodeType 这里讲一下nodeType。 - **nodeType == 1 表示的是元素节点**(标签) 。记住:元素就是标签。 - nodeType == 2 表示是属性节点 了解 - nodeType == 3 是文本节点 了解 ## DOM节点操作(重要) 上一段的内容:节点的**访问关系**都是**属性**。 本段的内容:节点的**操作**都是**函数**(方法)。 ### 创建节点 格式如下: ```javascript 新的标签(元素节点) = document.createElement("标签名"); ``` 比如,如果我们想创建一个li标签,或者是创建一个不存在的adbc标签,可以这样做: ```html ``` 打印结果: ![](http://img.smyhvae.com/20180127_1135.png) ### 插入节点 插入节点有两种方式,它们的含义是不同的。 方式1: ```javascript 父节点.appendChild(新的子节点); ``` 解释:父节点的最后插入一个新的子节点。 方式2: ```javascript 父节点.insertBefore(新的子节点,作为参考的子节点) ``` 解释: - 在参考节点前插入一个新的节点。 - 如果参考节点为null,那么他将在父节点最后插入一个子节点。 ![](http://img.smyhvae.com/20180127_1257.png) 我们可以看到,li标签确实被插入到了box1标签的里面,和box2并列了。 方式2的举例: ![](http://img.smyhvae.com/20180127_1302.png) 我们可以看到,b1标签被插入到了box1标签的里面,和a1标签并列,在a1标签的前面。 ### 删除节点 格式如下: ```javascript 父节点.removeChild(子节点); ``` 解释:**用父节点删除子节点**。必须要指定是删除哪个子节点。 如果我想删除自己这个节点,可以这么做: ```javascript node1.parentNode.removeChild(node1); ``` ### 复制节点(克隆节点) 格式如下: ```javascript 要复制的节点.cloneNode(); //括号里不带参数和带参数false,效果是一样的。 要复制的节点.cloneNode(true); ``` 括号里带不带参数,效果是不同的。解释如下: - 不带参数/带参数false:只复制节点本身,不复制子节点。 - 带参数true:既复制节点本身,也复制其所有的子节点。 ## 设置节点的属性 我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。 我们就统一拿下面这个标签来举例: ```html 地铁一瞥 ``` 下面分别介绍。 ### 1、获取节点的属性值 方式1: ```javascript 元素节点.属性; 元素节点[属性]; ``` 举例:(获取节点的属性值) ```html 地铁一瞥 ``` 上方代码中的img标签,有各种属性,我们可以逐一获取,打印结果如下: ![](http://img.smyhvae.com/20180127_1340.png) 方式2:(推荐) ```javascript 元素节点.getAttribute("属性名称"); ``` 举例: ```javascript console.log(myNode.getAttribute("src")); console.log(myNode.getAttribute("class")); //注意是class,不是className console.log(myNode.getAttribute("title")); ``` 打印结果: ![](http://img.smyhvae.com/20180127_1345.png) 方式1和方式2的区别在于:前者是直接操作标签,后者是把标签作为DOM节点。推荐方式2。 ### 2、设置节点的属性值 方式1举例:(设置节点的属性值) ```javascript myNode.src = "images/2.jpg" //修改src的属性值 myNode.className = "image2-box"; //修改class的name ``` 方式2:(推荐) ```javascript 元素节点.setAttribute(属性名, 新的属性值); ``` 方式2举例:(设置节点的属性值) ```javascript myNode.setAttribute("src","images/3.jpg"); myNode.setAttribute("class","image3-box"); myNode.setAttribute("id","你好"); ``` ### 3、删除节点的属性 格式: ```javascript 元素节点.removeAttribute(属性名); ``` 举例:(删除节点的属性) ```javascript myNode.removeAttribute("class"); myNode.removeAttribute("id"); ``` ## 我的公众号 想学习**代码之外的软技能**?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](http://img.smyhvae.com/2016040102.jpg)