DOM编程one

最新推荐文章于 2020-05-31 18:34:10 发布

luyuncsd123

最新推荐文章于 2020-05-31 18:34:10 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/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="求和" οnclick="sum() ;"/><br/>
 <a href="javascript : ;" οnclick="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="" οnclick="return false;"></a> <form οnsubmit="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" οnclick="doAction('l1');">选项一</li> 
          <li style="background-color:#ff88ee;"
          id="l2" οnclick="doAction('l2');">选项二</li> 
          <li style="background-color:#ff88ee;"
          id="l3" οnclick="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 οnsubmit="return check_form();">
   <table> 
       <tr> 
          <td>用户名</td>
          <td> <input id="username" name="username" οnblur="check_username();"/> 
          <span class="s1" id="username_msg"></span>
          </td>
          </tr> <tr>
          <td>密码</td>
           <td> 
          <input type="password" id="pwd" name="pwd" οnblur="check_pwd();"/> 
          <span class="s1" id="pwd_msg"></span>
       </td> 
      
    </tr> 
    <tr>
       <td>密码确认</td> 
       <td> <input type="password" id="repwd" name="repwd" οnblur="check_repwd();"/> 
       <span class="s1" id="repwd_msg"></span>
       </td> 
    </tr> 
     <tr> 
     <td>身份证号码</td>
     <td> <input type="text" id="idCard" name="idCard" οnblur="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>

luyuncsd123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程one

1.1. 什么是DOM? *Document Object Model(文档对象模型),定义了如何将一个结构化的文档(比如xml, html)转换成一棵树，并且也定义了如何操作这棵树的方法或者属性。这样做的目的，是为了方便对结构化文档的操作。1.2. w3c dom模型 ***w3c定义了dom模型，用来将html文档转换成内存当中的一棵树，并且也定义了相应的操作树的属性和
复制链接

扫一扫