JavaScript基础（2）-DOM

时间 2019-11-19

原文原文链接

1、伪数组argumentsjavascript

　　arguments表明的是实参，有个讲究的地方是：arguments只在函数中使用。css

一、返回函数实参的个数：arguments.length，例如：html

    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("----------------");

　　显示结果以下图：java

二、之因此说arguments是伪数组，是由于：arguments能够修改元素，但不能改变数组的长度。例如：node

    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)
    }

三、数组补充：清空数组的几种方式，例如：　　python

    var array = [1,2,3,4,5,6];

    array.splice(0);   // 方式1：删除数组中全部项目
    array.length = 0;  // 方式1：length属性能够赋值，在其它语言中length是只读
    array = [];        // 方式3：推荐

2、DOM介绍数组

一、什么是DOM浏览器

　　DOM（Document Object Model）：文档对象模型，DOM 为文档提供告终构化表示，并定义了如何经过脚原本访问文档结构。目的其实就是为了能让js操做html元素而制定的一个规范。网络

　　DOM就是由节点组成的。app

二、解析过程

　　HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内存中DOM上的元素节点，而后操做的时候修改的是该元素的属性。

三、DOM树（一切都是节点）

上图可知，在HTML当中，一切都是节点（很是重要）：

　　　　元素节点：HMTL标签；

　　　　文本节点：标签中的文字（好比标签之间的空格、换行）；

　　　　属性节点：：标签的属性；

　　整个html文档就是一个文档节点。全部的节点都是Object。

　　当浏览器载入 HTML 文档, 它就会成为 Document 对象。

　　Document 对象是 HTML 文档的根节点。

　　Document 对象使咱们能够从脚本中对 HTML 页面中的全部元素进行访问。

　　提示：

　　　　1）Document 对象是 Window 对象的一部分，可经过 window.document 属性对其进行访问；

　　　　2）经过document.documentElement获取html对象；

　　　　3）经过document.body获取body对象;

四、DOM能够作什么

　　找对象（元素节点）

　　设置元素的属性值

　　设置元素的样式

　　动态建立和删除元素

　　事件的触发响应：事件源、事件、事件的驱动程序

五、DOM节点的获取

　　操做元素节点，必须首先找到该节点，有三种方式能够获取DOM节点，例如：

    // 方式一：经过id获取单个标签
    var oDiv = document.getElementById("box");     
    // 方式二：经过 标签名 得到 标签数组，因此有s
    var oArr1 = document.getElementsByTagName("div");  
    // 方式三：经过 类名 得到 标签数组，因此有s
    var oArr2 = document.getElementsByClassName("hehe");

　　总结：

　　　　1）方式2、三获取的是标签数组，因此习惯性是先遍历以后再使用；

　　　　2）数组中的值即便只有一个，它也是包含在数组里的，想获得这个值要经过索引，例如：

    document.getElementsByTagName("div")[0]; // 取数组中的第一个元素
    document.getElementsByClassName("hehe")[0]; // 取数组中的第一个元素

六、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 表示的是文本节点

七、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，表示既复制节点自己，也复制其全部的子节点；

八、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");

3、关于DOM的事件操做

一、JavaScript的组成

JavaScript基础分为三个部分：

　　　　ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

　　　　DOM：文档对象模型，操做网页上的元素的API。好比让盒子移动、变色、轮播图等。

　　　　BOM：浏览器对象模型，操做浏览器部分功能的API。好比让浏览器自动滚动。

二、事件

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">
    　　// 一、获取事件源
    　　var div = document.getElementById("box");
    　　// 二、绑定事件
    　　div.onclick = function(){
        　　// 三、书写事件驱动程序
        　　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中都写成驼峰；

三、控制元素显示和隐藏有三种方法，以下：

a、控制style.display属性显示隐藏；

b、控制className对元素显示隐藏；

c、对元素的建立和销毁；

总结：

　　　　1）前两个的特色：初始化的时候有渲染，网页中频繁性的切换建议使用这种；

　　　　2）第三个特色：有生命周期，网页中少许的切换建议使用这种；

四、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>

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