JavaScript前端开发（七）

一、dom简介
        什么是API？
         应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，
         用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
         例如console.log方法。就是JS的一个API。

        文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。
        翻译：对HTML内部的标签进行处理。
二、如何通过DOM获取元素节点
        通过DOM节点获取HTML元素的4种方法  每种方法都要掌握.非常相似.
            
            方法1:通过标签名获取元素
            var a = document.getElementsByTagName("h3");
            //此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            至于怎么去处理,就是后续的任务.
            
            方法2:通过class名获取元素
            var b = document.getElementsByClassName("a");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            
            方法3:通过name获取元素
            var c = document.getElementsByName("b");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            
            方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理
            var d = document.getElementById("c");
三、如何操作节点
                常见的操作节点的三个属性：
                    1.innerText表示给标签内部重新赋值或取值  这里是文本值
                    
                    2.innerHtml表示给标签内部重新赋值或取值  这里是html值
                    
                    
                    注意以上2个方法只能作用于 非表单元素  例如 h标签  a标签   p标签等等
                    
                    //第三个方法只能作用于表单元素
                    例如input  
                    
                    方法3：  value表示给标签内部重新赋值或取值  这里是html值
四、如何操作节点的样式:  
        如何改变一个节点的样式:  
            步骤1.思考需要修改什么样式
            步骤2.去css里面查看该样式的单词
            步骤3.按照提示来
            步骤4.通过    节点.style.xxx  表示取值或赋值四、如何操作节点的样式
            //例如我要修改字体颜色
            p.style.color = "red";
            console.log(p.style.color)
            
            //例如我要修改背景色
             p.style.backgroundColor = "green"
            
            
            
            //以上写法的缺点: 麻烦  每次只能修改一个样式
            
            //所以:  如果样式很多,我们可以先将其封装到一个css里面
            p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性
五、js中的事件管理
            js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
            例如用户的单击  双击   等等等等
            
            需求:用户点击id为a的元素  弹出一个窗口
            步骤1:获取元素   
            步骤2:  元素.事件名 = function(){代码体}
            步骤3 常见的事件名:
            单击事件 onclick
            
            
            document.getElementById("a").onclick = function(){
                alert(123);
            }
            
            
            //需求2:给所有的p标签加上点击事件  下面的写法是错误的 需要遍历
            // document.getElementsByTagName("p");.onclick = function(){
            //     alert(123);
            // }
            var p = document.getElementsByTagName("p");
            for(var i = 0 ;i<p.length;i++){
                
                p[i].onclick = function(){
                    alert(456);
                }
                
            }
            
            
            双击事件  
            document.getElementById("a").ondblclick  = function(){
                alert(123);
            }
            
            
            鼠标移入事件 悬浮事件
            需求:鼠标放上图片   图片就放大2倍  鼠标移出就恢复原状
            
            鼠标移入事件onmouseover
            document.getElementsByTagName("img")[0].onmouseover = function(){
                document.getElementsByTagName("img")[0].style.width = "400px";
                document.getElementsByTagName("img")[0].style.height = "400px";
            }

            
            
            //鼠标移出事件onmouseout
            document.getElementsByTagName("img")[0].onmouseout = function(){
                document.getElementsByTagName("img")[0].style.width = "200px";
                document.getElementsByTagName("img")[0].style.height = "200px";
            }
六、js的属性
            js获取元素的属性：
            元素的常见属性:  id   class   src  href
            
            //需求:点击按钮 让这个a标签的href改成跳转到第二个页面
            需求 点击按钮,进入下一张图片
            document.getElementById("abc").onclick = function(){
                document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");
                document.getElementById('b').setAttribute("src","img/2.PNG");
            }
            
            
            
            //点击开始点名按钮 来回切换
            document.getElementById("btn").onclick = function(){
                if(document.getElementById("btn").innerText=="开始点名"){
                    document.getElementById("btn").innerText = "停止点名"
                }else{
                    document.getElementById("btn").innerText = "开始点名"
                }
            }