Day20：DOM(Document Object Model)

　　<!-- 
    DOM: document object model 文档对象模型。
    
    文档：标记型文档(html  xml)
    对象：将文档或者文档中的标签等内容都封装到了对象中。
    模型：只要是标记型文档都通用。
    
    为了实现动态效果。需要对页面中的 标签进行操作，
    操作所需的属性和行为都可以定义到该标签对象中。
    只要找到了要操作的标签，就可以调用该标签对象的属性和方法。来完成对该标签的操作。
    所以就需要有一个可以将标签解析成对象的技术。而这个技术就是DOM.
    
    
    到底如何解析的呢？
    从标记型文档开始，逐一解析，1，将标记型文档封装成document。接着将解析到的标签按照层次关系封装成对象。
    以及属性和文本全都变成对象。
    
    
    最后在内存中形成了一个具有层次关系的DOM树。
    通过树中的节点对象的方法就可以对这些节点进行操作。
    
    可以实现最基本的节点的操作：增删改查。
    
    
    -------------
    
    DHTML：动态的html，包含html，css，Javascript，dom。
    
    HTML：负责提供标签，对数据进行标记封装。
    CSS：负责提供样式属性，对数据进行样式的定义。
    DOM：负责将标记文档和标签等内容解析成对象，并在对象中定义属性和行为，就可以指挥对象做事情。
    Javascript：负责的是页面的行为(该怎么动)。动态效果的体现，需要程序设计语言来完成。
    
    
    BOM:Browser Object Model.浏览器对象模型。
    
    将浏览器也封装成了对象。
    window
        |--history:可以操作历史记录的对象。
        |--location：可以操作地址栏的对象。
        |--document：可以操作文档数据的对象。
    
     -->



    <!-- 演示location对象。
        1，定义事件源，按钮。
        2，注册事件动作。
     -->

    <script type="text/javascript">
        //定义一个功能。
        function locationDemo(){
            
            //演示location。
            //alert(window.location.href);
            
            location.href = "http://www.sina.com.cn";
            
        }
    </script>
    
    <input type="button" value="演示地址栏" onclick="locationDemo()" />

　　<!-- 
    DOM:的编程思想：其实就是不断的对dom树中的节点进行操作。
    而操作节点的前提：就是必须先获取节点。
    如何获取节点才是最重要的。
    
    一个页面中如何获取到其他节点。document对象最清楚。
    
    getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。 
    getElementsByName 根据 NAME 标签属性的值获取对象的集合。 
    getElementsByTagName 获取基于指定元素名称的对象集合。 
    
     -->

    <script type="text/javascript">
        function getNodeDemo() {
            //通过getElementById的方式获取div节点。
            //var node = document.getElementById("qq");
            //alert(node.innerHTML);
            
            //演示getElementsByName的方式获取节点。
            //var nodes = document.getElementsByName("user");
            //alert(nodes[0].value);
            //var node = document.getElementsByName("user")[0];
            //alert(node.value);
            
            // 通过标签名获取。
            //var node = document.getElementsByTagName("div")[0];
            //alert(node.innerHTML);
            //node.innerHTML = "大家，该吃饭了";
            
            
            //获取局部标签的方法。
            var tableNode = document.getElementsByTagName("table")[0];
            
            var divNodes = tableNode.getElementsByTagName("div");
            
            for(var x=0; x<divNodes.length; x++){
                alert(divNodes[x].innerHTML);
            }
        }
    </script>
    <input type="button" value="演示获取节点" onclick="getNodeDemo()" />

    <div id="qq">这是DIV区域</div>
    <input type="text" name="user" />

    <table>
        <tr>
            <td>
                <div>表格的div</div>
            </td>
        </tr>
    </table>

<style type="text/css">
    /*
    定义一下新闻区域范围。
    
    */
    #newsdiv{
        border:solid 1px #3366FF;
        width: 650px;
        padding: 20px;
    }
    
    /*让新闻字体和超链接有点距离。调整新闻字体区域的上外边距*/
    #newstext{
    
        margin-top: 20px;
    }
    
    /*
    让调整字体的超链接居右。
    */
    #cfdiv{
        text-align: right;
        width: 500px;
    }
    #cfdiv a:link,#cfdiv a:visited{
        color:#0033FF;
        text-decoration: none;
    }
    #cfdiv a:hover{
        color:#FF6633;
    }
    
    
    /*预定于选择器，由用户来决定到底用哪个样式*/
    .max{
        color:blue;
        font-size:18px;
        background-color: #CCFFFF;
    }
    .min{
        color:red;
        font-size:12px;
        background-color: #33FF66;
    }
    .norm{
        color:black;
        font-size:16px;
        background-color: #FFFFFF;
    }
</style>

<script type="text/javascript">
    function changeFont(name){
        
        //1,获取被处理的节点对象。新闻文字区域。
        var divNode = document.getElementById("newstext");
        
        //2,对获取到的被处理节点进行操作。改变该节点中文字的大小。
        
        /*
        操作样式少可以用style属性的方式去调用。
        当对一个节点多次样式操作时，这样做会后期维护很麻烦。
        可以让多样式进行封装，封装到一个选择器中，只要给该节点加载指定的选择器样式就哦了。
        */
        /*
        divNode.style.fontSize = size+"px";
        divNode.style.color = clr;
        with(divNode.style){
            
        }
        */
        
        //通过改变class属性的值就可以改变样式了。
        divNode.className = name;
    }

</script>

　　<!-- 
        示例：新闻字体调整。通过给定的大字体，中字体，小字体。来完成对新闻文字的调整。
        DHTML
        1，定义页面的结构。HTML标签。
        2，定义页面的样式效果。CSS
        3，动态效果：对象已被DOM解析驻留在内存中。
            3.1 明确事件源。超链接。
            3.2 明确事件动作，点击。onclick。并注册到事件源上。
            3.3 定义处理方式。
                    3.3.1 明确被处理的节点。
                    3.3.2 获取被处理的节点对象。
        
    
     -->

    <div id="newsdiv">
        
        <div id="newstitle"><h1>新闻标题--毕业生699万，工作何处求！</h1></div>
        
        <div id="cfdiv">
            <a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>  
            <a href="javascript:void(0)" onclick="changeFont('norm')">中字体</a>  
            <a href="javascript:void(0)" onclick="changeFont('min')">小字体</a>  
        </div>
        <hr/>
        <div id="newstext" class="norm">
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
            央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
        </div>
    
    </div>

　　<!-- 
        表单校验。
        1，校验方式：填写完一个就校验，提示信息在右边显示。
            1.1 通过失去焦点事件完成。
            1.2 提示信息要显示需要区域。所在组件的旁边定义一个区域。
        
        2，正则表达式对数据进行校验。
        
        3，如何控制控制表单在组件数据错误的情况下不提交。
    
     -->
    <script type="text/javascript">
        /*
        //校验用户名
        function checkUser(){
            
            var flag = false;
            //获取用户名节点对象。
            var userNode = document.getElementsByName("user")[0];
            
            //对用户名校验只要是abc就是正确。提示用户名正确。否则，用户名错误。
            var username = userNode.value;
            //因为要将提示信息存储到span区域中，所以要先获取到span区域。
            var spanNode = document.getElementById("userspan");
            
            //按照正则表达式的方式对用户名进行校验，要求四个字母。
            var regex = new RegExp("^[a-zA-Z]{4}$");
            
            //if(username=='abc'){
            if(regex.test(username)){
                spanNode.innerHTML = "用户名正确".fontcolor('green');
                flag = true;
            }else{
                spanNode.innerHTML = "用户名错误".fontcolor('red');
            }
            return flag;
        }
            
        //校验密码。发现代码一致，对重复代码进行抽取。
        function checkPsw(){
        
            var flag = false;
            //获取用户名节点对象。
            var passNode = document.getElementsByName("psw")[0];
            
            //对用户名校验只要是abc就是正确。提示用户名正确。否则，用户名错误。
            var pass = passNode.value;
            //因为要将提示信息存储到span区域中，所以要先获取到span区域。
            var spanNode = document.getElementById("pswspan");
            
            //按照正则表达式的方式对用户名进行校验，要求四个字母。
            var regex = new RegExp("^[0-9]{4}$");
            
            //if(username=='abc'){
            if(regex.test(pass)){
                spanNode.innerHTML = "密码格式正确".fontcolor('green');
                flag = true;
            }else{
                spanNode.innerHTML = "密码格式错误".fontcolor('red');
            }
            return flag;
        }
        
        function checkForm(){
            
            //要依赖于组件校验完的结果。
            //if(checkUser()){
            //    return true;
            //}else{
        //    return false;
            //}
            
            return checkUser();
        }
        
        function myCheckForm(){
            
            //获取表单对象。
            var formNode = document.getElementById("regform");
            
            if(checkUser()){
                formNode.submit();
            }
        }
        
         */

        //代码抽取。
        function check(name, spanid, reg, okinfo, errinfo) {

            var flag = false;
            var node = document.getElementsByName(name)[0];

            var val = node.value;

            var spanNode = document.getElementById(spanid);

            if (reg.test(val)) {
                spanNode.innerHTML = okinfo.fontcolor('green');
                flag = true;
            } else {
                spanNode.innerHTML = errinfo.fontcolor('red');

            }
            return flag;
        }

        //校验用户名。
        function checkUser() {
            var reg = new RegExp("^[a-zA-Z]{4}$");
            return check("user", "userspan", reg, "用户名正确", "用户名错误");
        }

        //校验密码：
        function checkPsw() {
            var reg = new RegExp("^[0-9]{4}$");
            return check("psw", "pswspan", reg, "密码格式正确", "密码格式错误");
        }

        //校验确认密码，只看是否和密码是否一致。
        function checkRepsw() {
            
            var flag = false;
            //获取确认密码。
            var repass = document.getElementsByName("repsw")[0].value;

            //获取密码。
            var pass = document.getElementsByName("psw")[0].value;

            //获取信息节点。span
            var spanNode = document.getElementById("repswspan");

            if (repass == pass) {
                spanNode.innerHTML = "两次密码一致".fontcolor('green');
                flag = true;
            }else{
                spanNode.innerHTML = "两次密码不一致".fontcolor('red');
            }
            
            return flag;
        }

        //校验邮件。
        function checkMail() {
            var reg = new RegExp("^\w+@\w+(\.\w+)+$");
            return check("mail", "mailspan", reg, "邮件格式正确", "邮件格式错误");
        }
        
        //校验性别
        function checkSex(){
            
            /*
            必须有一个被选中。
            思路：
            1，获取到有的单选按钮。
            2，遍历，判断是否一个被选中。如果有，没有提示。如果没有，提示。必须选择一个。
            */
            //获取所有单选按钮。
            var sexNodes = document.getElementsByName("sex");
            
            var flag = false;
            for(var x=0; x<sexNodes.length; x++){
                
                if(sexNodes[x].checked){
                    flag = true;
                    break;
                }
            }
            
            if(!flag){
                document.getElementById("sexspan").innerHTML = "必须选择性别".fontcolor('red');
            }
            
            return flag;
        }
        
        //校验表单。
        function checkForm(){

            return checkUser() && checkPsw() && checkRepsw() && checkMail() && checkSex();
            //return checkSex();
        }
    </script>


    <form action="" id="regform" onsubmit="return checkForm()">
        用户名称：<input type="text" name="user" onblur="checkUser()" /> 
        <span id="userspan"></span><br /> 
            
            
        输入密码：<input type="text" name="psw"    onblur="checkPsw()" /> 
        <span id="pswspan"></span><br /> 
        
        
        确认密码：<input type="text" name="repsw" onblur="checkRepsw()" /> 
        <span id="repswspan"></span><br /> 
        
        
        电子邮件：<input type="text" name="mail"    onblur="checkMail()" /> 
        <span id="Mailspan"></span><br /> 
        
        
        选择性别：
             <input type="radio" name="sex" value="nan"/>男
             <input type="radio" name="sex" value="nv"/>女
             <span id="sexspan"></span>
             <br/>
        
        <input type="submit" value="提交数据" />

    </form>
    <hr />
    <input type="button" value="山寨提交按钮" onclick="myCheckForm()" />