JavaScript加强:Dom

 JavaScript加强:Dom

 获取各个属性的值:

 DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.

D:文档 – html 文档 或 xml 文档

O:对象 – document 对象的属性和方法

M:模型

DOM 是针对xml(html)的基于树的API。

DOM树:节点(node)的层次。

DOM 把一个文档表示为一棵家谱树(父,子,兄弟)

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>01l.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/csshref="./styles.css">-->

    <script type="text/javascript">

          //当窗体加载完毕后,调研init函数

         window.onload = init;

         function init(){

         

          // var input  =  document.getElementById("username");  通过Id查询

          // alert(input.nodeName+"--"+input.nodeValue+"--"+input.nodeType);

          var btn = document.getElementById("button");

       

             btn.onclick = say;

             // --> btn.addEventListener("click",say,false);

         } 

           function say(){

             /* 

               根据标签名称获取

             var ins= document.getElementsByTagName("input");

               for(var i= 0;i<ins.length;i++){

                   alert(ins[i].value);

               }*/

               /*

                根据标签的  name名称获取

               var sexs = document.getElementsByName("sex");

               for( var i=0;i<sexs.length;i++){

                   alert(sexs.[i].value);

               }*/

               

               var msg="";

               var name =document.getElementById("username");

               //alert(name);               

               if(name.value==""){

               

               }else{

                  msg+="姓名:"+name.value;

               }

               var sexs =document.getElementsByName("sex");

               forvar i=0;i<sexs.length;i++){

                  if(sexs[i].checked){

                   msg+="性别:"+sexs[i].value;

                  }

               }

               var favs = document.getElementsByName("fav");

               forvar i=0;i<favs.length;i++){

                  if(favs[i].checked){

                  

                     msg+="爱好:"+favs[i].value;

                  }

               }

               document.getElementById("msg").innerHTML=msg;

           }

            

    </script> 

  </head>

  

  <body><div>

     <form action="" method="post" enctype="application/x-www-form-urlencoded">

      用户名:

<input type="text" name="username" id="username" />

<br />

<br />

性别 :

<input type="radio" name="sex" value="男" />

<input type="radio" name="sex" value="女" />

<br />

你个人爱好:

<input type="checkbox" name="fav" value="吃" />

<input type="checkbox" name="fav" value="喝" />

<input type="checkbox" name="fav" value="睡" />

<input type="checkbox" name="fav" value="玩" />

<br />

         <input type="button" id="button" value="得到指定的值"/>

        

        <div id="msg">

        

        </div>

     </form>

     </div>

  </body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值