JavaScript第九周

1_dom简介

什么是API？
         软件系统预先定义的接口，直接让程序员去调用即可。
         每一种开发语言都有自己的API。
         例如console.log方法。就是JS的一个API。
         System.out.print()就是Java的一个API

        文档对象模型简称：DOM
        用于处理HTML文档的编程接口。
        翻译：对HTML内部的标签进行处理

2_如何通过DOM获取元素节点

//html内部的所有标签 的另外一个叫法:  DOM节点.
            
            //通过DOM技术获取HTML元素（DOM节点）的4种方法  每种方法都要掌握.非常相似.
            
            //方法1:通过标签名获取元素
            var a = document.getElementsByTagName("h3");
            //此时就已经获取到了页面上所有的h3标签 注意：返回的一定是一个数组（遍历）.
            // 即使页面上只有一个h3标签,也是数组.  要想处理就必须要遍历才能处理.
            
            
            //方法2:通过class名获取元素
            var b = document.getElementsByClassName("a");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）
            
            //方法3:通过name获取元素
            var c = document.getElementsByName("b");
            //此时就已经获取到了页面上所有的name为a标签 注意返回的一定是一个数组（遍历)
            
            //方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理

3_如何操作节点

/*
                    常见的操作节点的三个属性：
                    1.innerText表示给标签内部重新赋值或取值  这里是文本值
                    
                    2.innerHtml表示给标签内部重新赋值或取值  这里是html值
                    
                    3.value 改变表单元素内部的value值
                    
                    注意方法1和方法2只能作用于非表单元素  
                    例如 h标签  a标签   p标签等等  或者理解为只能作用有 开标签和闭标签的。  <h3>   </h3> 
                    
                    第三个方法只能作用于表单元素
                    例如input   或者理解为只能作用有 只有开标签的。  <input  type="text" /> 
                    
                    
            */
            
        // var h3 = document.getElementsByTagName("h3");
        // for(var i = 0;i<h3.length;i++){
        //     // h3[i];这个就表示 获取到了每个h3节点
        //     // console.log( h3[i].innerText );//表示取值
        //     // h3[i].innerText = "nihao123";  //表示赋值
            
        //     //innerHtml就可以实现
        //     console.log( h3[i].innerHTML );//表示取值
        //     h3[i].innerHTML = "<p>我是p标签</p>";  //表示赋值
        // }

4_如何操作节点的样式

//如何修改页面中某个元素(DOM节点)的CSS样式.
            //常见的方法1:(适用于仅仅只需要修改一丢丢CSS样式)
            //步骤1:获取节点
            //步骤2:通过style.xxx熟悉  即可完成赋值或取值  其中XXX表示指定的CSS样式
            
            // var p = document.getElementById("abc");
            // p.style.color = "red";
            // p.style.backgroundColor = "blue";
            // console.log(p.style.color);
            
            //常见的方法2:(适用于需要修改较多的CSS样式)
            //步骤1:将所有要修改的样式 全部封装到指定的style标签中 形成一个class的样式
            //步骤2:获取指定的元素节点 然后通过.className来给元素赋予一个指定的类名.

5_js中的事件管理

//js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
            //例如用户的单击  双击  鼠标移入  移出   键盘的输入    等等等等
            
            //常见的事件如下:
            //1.单击事件: onclick  用处最多.
            //2.双击事件: ondblclick  
            //3.鼠标移入事件: onmouseover
            //4.鼠标移出事件: onmouseout
            //5.键盘输入事件:onkeyup
            //6.失去焦点事件:onblur
            //7.获取焦点事件:onfocus
            //8.表单提交事件:onsubmit
            //9.下拉菜单事件:onchange
            
            //事件的语法如下:
            //xxx表示获取的元素节点  abc表示什么事件
            // xxx.onabc = function(){   }

6_复习表单

<!-- 
            表单：form
            应用场景：  用户登录、  用户注册     添加一个商品信息
            
            凡是需要将多个数据打包发送的 都可以使用表单。
            
            form表单三大属性:
            
            A.action表示将表单提交给谁。一般放一个URL地址  其中#表示不提交
            B.method表示表单的提交方式：只有2个选择、1.get  2.post 默认是get。
            
            
                区别如下：
                get的速度快。因为只能携带极少的数据。 不安全，会将表单数据全部显示在url地址。是客户端行为（只依赖浏览器）
                
                post的速度慢：因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为（依赖服务器）
            
            C.enctype：表示该表单是什么类型的表单。
            默认值1：    application/x-www-form-urlencoded 表示普通表单 所以：绝大部分表单都可以不用加。
            可选值2：    multipart/form-data               表示文件上传的表单。如果需要文件上传就只能用这个。
            可选值3：    text/plain                        表示大文本类型 常用于国家化传输邮件。
            
            
            如何将表单打包发送给action的路径：
            通过提交按钮：以下三种方式 均可。  一般使用第三种。
            1 <button>提交（登录）</button> 
            2 <button type="submit">登录提交</button>
            3 <input type="submit" value="登录提交" />
            
            
            后台如何获取表单内部的数据。
            只需要在表单内部的标签元素中 添加name属性即可。（必须要加的，否则获取不到值）
            后台只需要根据name来取值。
            
            
            
            串讲：button标签的易错事项。
            
            button标签的完整写法：
            <button type="xxx">按钮</button>
            其中type的取值有3个：
            1.submit  默认值  表示提交按钮
            2.button  可选择  表示普通的按钮
            3.reset   可选择  表示重置按钮
            
            button标签中type属性的默认值是 submit  如果该标签放在form表单则会提交表单。
            但是如果没在，就是一个普通的按钮
   
         -->