JavaScript基础（2）-DOM

一、伪数组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(“文本内容”);  例如：

    <script type="text/javascript">
        var oA1 = document.createElement("li");   // 创建一个li标签节点
        var oA2 = document.createElement("abc");   // 也可以创建一个自定义的标签
        var oTxt = document.createTextNode("文本节点");  // 创建一个文本节点

        console.log(oA1);  // <li></li>
        console.log(oA2);  // <abc></abc>
        console.log(oTxt);  // "文本节点"
        console.log(typeof oA1,typeof oA2,typeof oTxt);  // object object object
    </script>

　　b、插入节点，有两种方式

　　　　1）父节点.appendChild(新的子节点);  例如：

    <div class="parent">
        <div class="da"></div>
        <div class="er"></div>
        <div class="san"></div>
    </div>

    <script type="text/javascript">
        var oPar = document.getElementsByClassName('parent')[0];
        var oP = document.createElement("p");
        var oTxt = document.createTextNode('文本节点');

        oP.appendChild(oTxt);  // 为p标签添加文本内容
        oPar.appendChild(oP);  // oPar节点的最后添加新的子节点oP
    </script>

　　　　　　总结：表示父节点的最后插入一个新的子节点。

　　　　2）父节点.insertBefore(新的子节点，作为参考的子节点);   例如：

    <div class="parent">
        <div class="da"></div>
        <div class="er"></div>
        <div class="san"></div>
    </div>

    <script>
        var oPar = document.getElementsByClassName('parent')[0];
        var oDa = document.getElementsByClassName('da')[0];
        var oP = document.createElement("p");
        var oTxt = document.createTextNode('文本节点');
        oP.appendChild(oTxt);  // 为p标签添加文本内容

        oPar.insertBefore(oP,oDa);  // 在oDa节点前添加oPar的子节点oP
    </script>

　　　　　　总结：此方法有两个参数，第二个参数是参考节点，若参考节点为null，则将在最后插入。

　　c、删除节点

语法：父节点.removeChild(子节点);  例如：

    <div class="parent"><div class="da"></div>
        <div class="er"></div>
        <div class="san"></div>
    </div>

    <script>
        var oPar = document.getElementsByClassName('parent')[0];
        var oDa = document.getElementsByClassName('da')[0];
        oPar.removeChild(oDa);
    </script>

　　　　　　删除自己本身这个节点写法：

    node1.parentNode.removeChild(node1);

　　　　　　总结：用父节点删除子节点，必须要指定是删除哪个子节点。

d、复制节点（克隆节点）

　　　　语法：要复制的节点.cloneNode();   // 默认参数是false

　　　　　　要复制的节点.cloneNode(true);  例如：

    <ul id="myList">
        <li>Water</li>
        <li>Milk</li>
    </ul>

    <script>
        var oItm = document.getElementById("myList").lastChild;
        var oCln = oItm.cloneNode(true);
        var oCln2 = oItm.cloneNode();
        console.log(oCln);  // <li>Milk</li>
        console.log(oCln2); // <li></li>
    </script>

总结：不带参数/带参数false，表示只复制节点本身，不复制子节点；

带参数true，表示既复制节点本身，也复制其所有的子节点；

8、DOM节点对象属性的获取和赋值

　　a、对标签样式的操作，例如：

    对象.style.marginLeft = “20px”;  // 样式驼峰表示

　　b、对标签属性的操作，例如：　　

    对象.src = “1.jpg”; // 直接.属性名
    对象.className = “active”;  // className特殊记，获取类名不是class

　　c、对值的操作，例如：

1）innerText 只获取文本，例如：

    　　对象.innerText = “文本”;

2）innerHTML 获取文本和标签（能解析标签），例如：

        对象.innerHTML = “<h3>文本</h3>”;

3）value 一般用于单闭合标签，比如表单元素input输入框，例如：

        对象.value = “alex”;

　　d、上面是通过“点语法”获取，通过“=”赋值，也可通过下面方法获取和赋值，例如：

　　　　获取：对象.[“属性名”](className特殊)   或者   对象.getAttribute(“属性名”);

　　　　赋值：对象. setAttribute(“属性名”,”属性值”);

　　　　<body>
　　　　<img src="1.jpg" class="img-box" title="美女图片" alt="地铁一瞥" id="a1">

　　　　<script type="text/javascript">
    　　　　var myNode = document.getElementsByTagName("img")[0];

    　　　　console.log(myNode["title"]);  // 美女图片
    　　　　console.log(myNode["className"]); // img-box, 注意, 是className
    　　　　console.log(myNode.getAttribute("title"));  // 美女图片
    　　　　console.log(myNode.getAttribute("class"));   // img-box, 注意, 是class
    　　　　myNode.setAttribute("title","美景图片");
    　　　　myNode.setAttribute("alt","桂林山水");
　　　　</script>
　　　　</body>

　　删除节点的属性：对象.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的操作;

代码示例：

　　<body>
　　<div id="box">box</div>

　　<script type="text/javascript">
    　　// 1、获取事件源
    　　var div = document.getElementById("box");
    　　// 2、绑定事件
    　　div.onclick = function(){
        　　// 3、书写事件驱动程序
        　　alert("我是弹出的内容");
    　　}
　　</script>
　　</body>

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、绑定事件的方式

方式一：直接绑定匿名函数，例如：

　　<div id="box" >box</div>

　　<script type="text/javascript">
    　　var oDiv = document.getElementById("box");
    　　oDiv.onclick = function(){
        　　alert("我是弹出的内容");
    　　}
　　</script>

　方式二：先单独定义函数，再绑定，例如：　

　　<div id="box" >box</div>

　　<script type="text/javascript">
    　　var oDiv = document.getElementById("box");
    　　oDiv.onclick = fn;   // 注意，这里是fn，不是fn()
    　　function fn(){
        　　alert("我是弹出的内容");
    　　}
　　</script>

方式三：行内绑定，例如：　　

　

　　<div id="box" onclick="fn()">box</div>  // 注意，这里是fn()

　　<script type="text/javascript">
    　　function fn(){
        　　alert("我是弹出的内容");
   　　 }
　　</script>

　　d、事件驱动程序

我们在上面是用alert举例的，除此之外，还可以操作标签的属性和样式，例如：

　　<div id="box" style="width: 100px; height: 100px; background-color: yellow;">
　　</div>

　　<script type="text/javascript">
    　　var oDiv = document.getElementById("box");
    　　// 点击box时，原本粉色的div变大了，背景变成了红色
    　　oDiv.onclick = function () {
        　　oDiv.style.width = "200px";   // 属性值要写引号
        　　oDiv.style.height = "200px";
        　　oDiv.style.backgroundColor = "red";
        　　// 属性名是backgroundColor，不是background-color
    　　}
　　</script>

注意事项：

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事件，例如：

　　<script type="text/javascript">
    　　window.onload = function(){
        　　console.log("小马哥");  // 页面（文档和图片）加载完毕时，打印字符串
    　　}
　　</script>

总结：有一点我们要知道：js的加载是和html同步加载的，因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。所以建议：整个页面上所有元素加载完毕再执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

如果遇到网络不稳定，图片没有加载完成，则还是不会执行js代码，所以我们可以写成当文档加载完再执行js代码，写法如下：

　　<script type="text/javascript">
    　　document.onload = function(){
        　　console.log("小马哥");  // 文档加载完毕时，打印字符串
    　　}
　　</script>

　注意：这两种都有事件覆盖现象，也就是只能写一个，写多个会被最后一个覆盖。