一、伪数组arguments
arguments代表的是实参，有个讲究的地方是：arguments只在函数中使用。
1、返回函数实参的个数：arguments.length，例如：
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); console.log(fn.length); // 获取形参的个数 console.log(arguments.length); // 获取实参的个数 console.log("----------------"); } 显示结果如下图：
2、之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长度。例如：
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b){ arguments[0] = 99; // 将实参的第一个数改为99 arguments.push(8); // 此方法报错，arguments不能增加元素 console.log(arguments) } 3、数组补充：清空数组的几种方式，例如：
var array = [1,2,3,4,5,6]; array.splice(0); // 方式1：删除数组中所有项目 array.length = 0; // 方式1：length属性可以赋值，在其它语言中length是只读 array = []; // 方式3：推荐
二、DOM介绍
1、什么是DOM
DOM（Document Object Model）：文档对象模型，DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。
2、解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内存中DOM上的元素节点，然后操作的时候修改的是该元素的属性。
3、DOM树（一切都是节点）
上图可知，在HTML当中，一切都是节点（非常重要）：
元素节点：HMTL标签；
文本节点：标签中的文字（比如标签之间的空格、换行）；
属性节点：：标签的属性；
整个html文档就是一个文档节点。所有的节点都是Object。
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：
1）Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问；
2）通过document.documentElement获取html对象；
3）通过document.body获取body对象;
4、DOM可以做什么
找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序
5、DOM节点的获取
操作元素节点，必须首先找到该节点，有三种方式可以获取DOM节点，例如：
// 方式一：通过id获取单个标签 var oDiv = document.getElementById("box"); // 方式二：通过 标签名 获得 标签数组，所以有s var oArr1 = document.getElementsByTagName("div"); // 方式三：通过 类名 获得 标签数组，所以有s var oArr2 = document.getElementsByClassName("hehe"); 总结：
1）方式二、三获取的是标签数组，所以习惯性是先遍历之后再使用；
2）数组中的值即使只有一个，它也是包含在数组里的，想得到这个值要通过索引，例如：
document.getElementsByTagName("div")[0]; // 取数组中的第一个元素 document.getElementsByClassName("hehe")[0]; // 取数组中的第一个元素 6、DOM访问关系的获取（节点的访问关系，是以属性的方式存在的）
DOM的节点并不是孤立的，因此可以通过DOM节点之间的关系对它们进行访问。
| 父节点 | 兄弟节点 | 单个子节点 | 所有子节点 |
| parentNode | nextSibling | firstChild | childNodes |
|
| nextElementSibling | firstElementChild | children |
|
| previousSibling | lastChild |
|
|
| previousElementSibling | lastElementChild |
|
a、nextSibling
火狐、谷歌、IE9+版本：指的是下一个节点（包括标签、文本、空格、换行节点）；
IE6/7/8版本：指的是下一个元素节点（标签）；
b、nextElementSibling
火狐、谷歌、IE9+版本：指的是下一个元素节点（标签）；
c、为了在不同浏览器都能获取下一个元素节点，我们可以在IE6/7/8中用nextSibling，在火狐谷歌IE9+中用nextElementSibling，于是，综合这两个属性，可以这样写：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
d、previousSibling、firstChild、lastChild也有类似上述问题，所以都像如下这样写：
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
e、childNodes：标准属性（W3C的亲儿子），返回指定元素的子节点（标签，文本、换行）的集合。
f、children：非标准属性，返回的是指定元素的子元素节点的列表。
1）它只返回HTML节点，甚至不返回文本节点；
2）在IE6/7/8包含注释节点（在IE6/7/8中，注释节点不要写在里面）；
3）虽然不是标准的DOM属性，但是它和innerHTML方法一样，得到了几乎所有浏览器的支持；
4）用法（用的最多）：子节点数组 = 父节点.children; // 获取所有子节点
g、获得任意一个兄弟节点，例如：
节点自己.parentNode.children[index]; // 通过索引得到任意兄弟节点
h、nodeType
nodeType == 1 表示的是元素节点（元素就是标签）
nodeType == 2 表示的是属性节点
nodeType == 3 表示的是文本节点
7、DOM节点操作（节点的操作都是方法）（重要）
a、创建节点（标签节点和文本节点）
语法：创建的标签节点对象 = document.createElement("标签名");
创建的文本节点对象 = document.createTextNode(“文本内容”); 例如：
b、插入节点，有两种方式
1）父节点.appendChild(新的子节点); 例如：
总结：表示父节点的最后插入一个新的子节点。
2）父节点.insertBefore(新的子节点，作为参考的子节点); 例如：
总结：此方法有两个参数，第二个参数是参考节点，若参考节点为null，则将在最后插入。
c、删除节点
语法：父节点.removeChild(子节点); 例如：
删除自己本身这个节点写法：
node1.parentNode.removeChild(node1);
总结：用父节点删除子节点，必须要指定是删除哪个子节点。
d、复制节点（克隆节点）
语法：要复制的节点.cloneNode(); // 默认参数是false
要复制的节点.cloneNode(true); 例如：
- Water
- Milk
总结：不带参数/带参数false，表示只复制节点本身，不复制子节点；
带参数true，表示既复制节点本身，也复制其所有的子节点；
8、DOM节点对象属性的获取和赋值
a、对标签样式的操作，例如：
对象.style.marginLeft = “20px”; // 样式驼峰表示
b、对标签属性的操作，例如：
对象.src = “1.jpg”; // 直接.属性名 对象.className = “active”; // className特殊记，获取类名不是class
c、对值的操作，例如：
1）innerText 只获取文本，例如：
对象.innerText = “文本”;
2）innerHTML 获取文本和标签（能解析标签），例如：
对象.innerHTML = “文本
”;
3）value 一般用于单闭合标签，比如表单元素input输入框，例如：
对象.value = “alex”;
d、上面是通过“点语法”获取，通过“=”赋值，也可通过下面方法获取和赋值，例如：
获取：对象.[“属性名”](className特殊) 或者 对象.getAttribute(“属性名”);
赋值：对象. setAttribute(“属性名”,”属性值”);
删除节点的属性：对象.removeAttribute(“属性名”); 例如：
myNode.removeAttribute("class");
三、关于DOM的事件操作
1、JavaScript的组成
JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
2、事件
JS是以事件驱动为核心的一门语言。
事件的三要素：事件源，事件，事件驱动程序。
事件源：引发后续事件的html标签；
事件：js中已经定义好了；
事件驱动程序：对样式和html的操作，也就是DOM；
代码书写步骤：
（1）获取事件源：document.getElementById(“box”);
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作;
代码示例：
box
a、获取事件源的方式（即DOM节点的获取方式）
// 方式一：通过id获取单个标签元素 var oDiv = document.getElementById("box"); // 方式二：通过 标签名 获得 标签数组，所以有s var oArr1 = document.getElementsByTagName("div"); // 方式三：通过 类名 获得 标签数组，所以有s var oArr2 = document.getElementsByClassName("hehe");
b、常见事件如下表：
| 事件名 | 说明 |
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onmouseenter | 当鼠标指针移动到元素上时触发，（移到子元素上时不会触发） |
| onmouseleave | 当鼠标指针移出元素时触发，（移出子元素时不会触发） |
| onmouseover | 鼠标悬停，即鼠标停留在图片等的上方，（移到子元素上时也会触发） |
| onmouseout | 鼠标移出，即离开图片等所在的区域，（移出子元素时也会触发） |
| onkeydown | 某个键盘按键被按下时触发，键盘事件 |
| onkeyup | 某个键盘按键被松开时触发，键盘事件 |
| onload | 网页文档加载事件，框架/对象（Frame/Object）事件 |
| onunload | 关闭网页时，框架/对象（Frame/Object）事件 |
| onsubmit | 表单提交事件，表单事件 |
| onreset | 重置表单时，表单事件 |
| onchange | 文本内容或下拉菜单中的选项发生改变时触发，表单事件 |
| onfocus | 获得焦点，表示文本框等获得鼠标光标，表单事件 |
| onblur | 失去焦点，表示文本框等失去鼠标光标，表单事件 |
c、绑定事件的方式
方式一：直接绑定匿名函数，例如：
box
方式二：先单独定义函数，再绑定，例如：
box
方式三：行内绑定，例如：
box// 注意，这里是fn()
d、事件驱动程序
我们在上面是用alert举例的，除此之外，还可以操作标签的属性和样式，例如：
注意事项：
1）在js里写属性值时，要用引号；
2）在js里写属性名时，是驼峰写法，比如backgroundColor，而不是css里面的background-color，记得所有像css属性的text-*、line-*、background-* 等在js中都写成驼峰；
3、控制元素显示和隐藏有三种方法，如下：
a、控制style.display属性显示隐藏；
b、控制className对元素显示隐藏；
c、对元素的创建和销毁；
总结：
1）前两个的特点：初始化的时候有渲染，网页中频繁性的切换建议使用这种；
2）第三个特点：有生命周期，网页中少量的切换建议使用这种；
4、onload事件
当页面加载（文本和图片）完毕的时候，触发onload事件，例如：
总结：有一点我们要知道：js的加载是和html同步加载的，因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。所以建议：整个页面上所有元素加载完毕再执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
如果遇到网络不稳定，图片没有加载完成，则还是不会执行js代码，所以我们可以写成当文档加载完再执行js代码，写法如下：
注意：这两种都有事件覆盖现象，也就是只能写一个，写多个会被最后一个覆盖。