JavaScript DOM操作与表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/luyuncsd123/article/details/8224746

1.1. 什么是DOM? *

Document Object Model(文档对象模型),定义了如何将一个结构化的文档(比如xml, html)转换成一棵树，并且也定义了如何操作这棵树的方法或者属性。这样做的目的，是为了方便对结构化文档的操作。

1.2. w3c dom模型 ***

w3c定义了dom模型，用来将html文档转换成内存当中的一棵树，并且也定义了相应的操作树的属性和方法。
1) 树的结构（了解）
Node

Document

HTMLDocument

HTMLBodyElement

Element

HTMLElement

HTMLFormElement

HTMLInputElement

HTMLSelectElement

HTMLOptionElement

HTMLDivElement

HTMLTableElement

HTMLTableCaptionElement

HTMLTableRowElement

HTMLTableCellElement

2) dom操作（重点）
a. 查找方式（常用方式）
//document是HTMLDocument的实例。 var obj = document.getElementById(id) ;
b. 创建节点
c. 添加节点

d. 删除节点
e. 样式操作

改变页面显示内容

“Javascript : ;“ 表示一个空白的JS语句

获得用户文本框输入的数据

dom操作 ***

<html> 
    <!--dom操作-->
   <head> 
      <script> 
         function f1(){
        var obj = document.getElementById('d1') ;
        /* innerHTML属性：可以读或者写一个 节点的html内容。*/
        //alert(obj.innerHTML) ; 
        //obj.innerHTML = 'hello kitty' ; 
        var obj2 = document.getElementById('username') ; 
        /* value属性：可以读或者写一个节点的 value值。*/ 
        //alert(obj2.value) ; obj2.value = 'abc' ; } 
      function sum(){ 
         var txtObj1 = document.getElementById('op1') ;
         var txtObj2 = document.getElementById('op2') ;
         var v1 = parseInt(txtObj1.value) ;
         var v2 = parseInt(txtObj2.value) ;
var v3 = v1 + v2 ;
 var txtObj3 = document.getElementById('op3') ;
 txtObj3.value = v3 ; 
} 
function f2(){ 
        var op1 = Math.random() ;
        //alert(op1) ; 
        //var op2 = Math.ceil(13.98) ;
        var op2 = Math.floor(13.98) ; 
        //alert(op2) ; 
        var op3 = Math.floor(Math.random()*34) ; 
        alert(op3) ; 
      } 
     </script> 
</head>
<body style="font-size :30px ;">
    <div id="d1">  
          <span>hello</span>
    </div> 
      username :<input type="text"
            name="username" 
            id="username"/><br/> 
      操作数1 :<input name="op1" id="op1"/>
      操作数2 :<input name="op2" id="op2"/> 
         结果 :<input name="op3" id="op3"/> 
   <input type="button" value="求和" onclick="sum() ;"/><br/>
 <a href="javascript : ;" onclick="f2() ;">Click me</a>
 </body> 
</html>

1. dom操作 ***
1) 查找
a. 方式一（常用方式）
//document是HTMLDocument的实例。 var obj = document.getElementById(id);
b. 方式二
根据标记的名字返回相应节点 var arr = node.getElementsByTagName(tagName);
c. 方式三（使用遍历的方式）
 parentNode
 previousSibling
 nextSibling
 childNodes
 firstChild
 lastChild
因为遍历的方式浏览器兼容性差，不建议使用

可以使用别人写好的框架的方式进行遍历
2) 创建节点
var obj = document.createElement(tagName);
3) 添加节点
a. 将obj作为node的最后一个孩子添加进来。
node.appendChild(obj);
b. 将obj插入到refNode前面
node.insertBefore(obj,refNode);
c. 替换refNode
node.replaceChild(obj,refNode);
4) 删除节点
node.removeChild(obj);
5) 样式操作
 方式一
修改节点的style属性。注意：
a. 要修改的样式必须是内联样式
b. 如果样式的属性名称包括"-"，要将"-"号除掉，然后将"-"号后面的第一个字母大写。
方式二（常用）
修改节点的class属性。

 方式二（常用）
修改节点的class属性。

className = class选择器名称。比如: obj.className = 's2';

6) 如何禁止浏览器的默认行为?
在默认情况下，点击链接，浏览器会向href所指向的地址发请求。点击表单提交，浏览器会将表单中的数据进行发送。如果要禁止，可以使用如下语句: <a href="" onclick="return false;"></a> <form onsubmit="return false;">

7) 如何使用正则表达式进行字符串的验证?
var reg = /正则表达式/; boolean reg.test(要验证的字符串); js引擎会将"/正则表达式/"转换成一个RegExp对象，当字符串满足正则表达式的要求时，返回true。
8) prototype框架的使用
$(id): 相当于document.getElementById(id);
$F(id): 相当于document.getElementById(id).value;
$(id1,id2...): 依次查找id为id1,id2...的节点，返回一个数组。
strip(): 除掉字符串两端的空格。

1.1. Dom查找的第2种方式 **

Dom查找的第二种方式（根据标记的名字返回相应节点）

<html> 
   <!--dom 查找--> 
    <head>   
       <style>  
          ul{ 
               list-style-type:none; 
             }
          ul li{ 
               float:left;
               width:120px;
               height:40px;
               border:1px solid black; 
               margin-left:20px;
               text-align:center;
               cursor:pointer;
               }
        </style>
    <script> 
         function doAction(id){ 
                 var ulObj =
                    document.getElementById('u1'); 
                var arr = ulObj.getElementsByTagName('li');
                for(i=0;i<arr.length;i++){
                   arr[i].style .backgroundColor = '#ff88ee';
                }
                var obj = document.getElementById(id); 
               obj.style.backgroundColor='red';
 } 
</script>
</head>
<body style="font-size:30px;"> 
    <ul id="u1">
          <!-- 内联样式-->
          <li style="background-color:#ff88ee;"
          id="l1" onclick="doAction('l1');">选项一</li> 
          <li style="background-color:#ff88ee;"
          id="l2" onclick="doAction('l2');">选项二</li> 
          <li style="background-color:#ff88ee;"
          id="l3" onclick="doAction('l3');">选项三</li> 
     </ul>
   </body> 
</html>

注意：
 要修改的样式必须是内联样式
 如果样式的属性名称包括"-"，要将"-"号除掉，然后将"-"号后面的第一个字母大写
1.2. 案例表单验证 ***
知识点：
1) Dom操作
2) 样式操作的第2种方式
修改节点的class属性。 className = class选择器名称。比如: obj.className = 's2';
 演示1

如何禁止浏览器默认行为（数据不规范，则不能提交）

密码框演示（正则表达式）

如何使用正则表达式进行字符串的验证?
var reg = /正则表达式/;

boolean reg.test(要验证的字符串);

js引擎会将"/正则表达式/"转换成一个RegExp对象，当字符串满足正则表达式的要求时，

返回true。

表单验证

1.3. 创建节点 **

增加节点 insertBefore()

引入外部的js文件
1) myjs.js

2) js03.html

【案例3】创建节点

1.4. prototype框架的使用 ***
1) $(id): 相当于document.getElementById(id);
2) $F(id): 相当于document.getElementById(id).value;
3) $(id1,id2...): 依次查找id为id1,id2...的节点，返回一个数组。
4) strip(): 除掉字符串两端的空格。

演示1
1) 没有引入prototype

2) 引入prototype

【练习1】点击链接，添加一个div，显示相应提示信息

【练习2】表单验证
 要求
1) 用户名：丌能为空
2) 密码：6位数字
3) 密码确认：两次密码输入必须相等
4) 身份证号码:必须是15位数字戒者是18位数字(最末一位也可以'X'戒者'x')。

<html> 
    <head> 
        <style> 
             #d1{
              width:400px; height:250px;
              background-color:#FFE4B5;
              margin:40px auto; 
                  } 
          #d1_head{
              color:white; font-size:20px;
              font-family:"Arial";
              height:24px;  
              background-color:blue;
              } 
          #d1_content{ 
              padding-left:30px; 
              padding-top:30px; } 
          .s1{ color:red;
              font-style:italic; 
               } 
          .s2{  
             border:2px dotted blue;
              } 
     </style> 
 <script src="prototype-1.6.0.3.js"></script>
 <script>
         function check_username(){ 
               var txtObj = $('username');
               txtObj.className = '';
               var msgObj = $('username_msg'); 
               msgObj.innerHTML = '';
              if($F('username').strip().length == 0){
               msgObj.innerHTML = '用户名丌能为空';
             //给节点的class属性赋值 txtObj.className = 's2'; 
             return false;
              } return true;
       } 
        function check_pwd(){ 
            var pwdObj = $('pwd'); 
            pwdObj.className = ''; 
            var msgObj = $('pwd_msg'); 
            msgObj.innerHTML = ''; 
            var reg = /^\d{6}$/; 
            if(!reg.test($F('pwd'))){
            msgObj.innerHTML='密码是6位数字'; 
            pwdObj.className= 's2'; return false; 
             } return true; 
 }
       function check_repwd(){ 
           $('repwd').className = '';
           $('repwd_msg').innerHTML = '';
           if($F('repwd') != $F('pwd')){
             $('repwd_msg').innerHTML='两次输入要相等'; 
             $('repwd').className = 's2'; return false; 
        } 
          return true; 
      } 
       function check_card(){
           $('idCard').className = '';
           $('card_msg').innerHTML = '';
           var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/; 
         if(!reg.test($F('idCard'))){
          $('card_msg').innerHTML = '格式丌正确';
          $('idCard').className = 's2'; 
            return false;
                 } 
        return true;
}
      function check_form(){
      var flag = check_username() && check_pwd() && check_repwd() && check_card(); return flag; } 
    </script> 
  </head> 
<body> 
     <div id="d1">
       <div id="d1_head">注册</div> 
       <div id="d1_content"> 
       <form onsubmit="return check_form();">
   <table> 
       <tr> 
          <td>用户名</td>
          <td> <input id="username" name="username" onblur="check_username();"/> 
          <span class="s1" id="username_msg"></span>
          </td>
          </tr> <tr>
          <td>密码</td>
           <td> 
          <input type="password" id="pwd" name="pwd" onblur="check_pwd();"/> 
          <span class="s1" id="pwd_msg"></span>
       </td> 
      
    </tr> 
    <tr>
       <td>密码确认</td> 
       <td> <input type="password" id="repwd" name="repwd" onblur="check_repwd();"/> 
       <span class="s1" id="repwd_msg"></span>
       </td> 
    </tr> 
     <tr> 
     <td>身份证号码</td>
     <td> <input type="text" id="idCard" name="idCard" onblur="check_card();"/>
     <span class="s1" id="card_msg"></span>
     </td> 
     </tr>
      <tr> 
         <td colspan="2"> <input type="submit" value="确认"/>
         <input type="reset" value="重置"/>
         </td> 
      </tr> 
     </table> 
    </form> 
  </div> 
</div>
</body> 
</html>

DOM编程one