JavaScript DOM

一.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";

             }

            

            

            输入账号,失去焦点就需要数据校验

            document.getElementById("aaa").onblur = function(){

                var str = document.getElementById("aaa").value;

                 if(str.length >10){

                     document.getElementById("bbb").innerText = "长度太长了";

                     document.getElementById("bbb").style.color = "red";

                 }else{

                     document.getElementById("bbb").innerText = "数据合格";

                     document.getElementById("bbb").style.color = "green";

                 }

            }

六.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 = "开始点名"

                }

            }