你的位置:首页 > Java教程

[Java教程]Java script 的dom编程


实例1:

 </head>

 <body>

  <div id="div1">

   <p id="p1">这是一个段落</p>

   <p id="p2">这是另外一个段落</p>

     

  </div>

 </body>

 <script type="text/javascript" language="JavaScript">

  var pare=document.createElement("p");//创建一个p标签的元素

  var node=document.createTextNode("这是一个新段落");//创建一个文本节点

  pare.appendChild(node);//向p标签里面追加文本的子节点

   

  var element=document.getElementById("div1");

  element.appendChild(pare);//然后直接向div中追加p标签

 </script>

</html>

实例2

购物车的例子

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <script type="text/javascript" language="JavaScript">

  function gouwu(object){

   var fruits=document.getElementsByName("fruit");

   var totalprice=0;

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

    if(fruits[i].checked){

     totalprice+=parseInt(fruits[i].value);

    }

   }

   

   myspan.innerText=totalprice+"元";

  }

 </script>

 <body>

  <h1>购物车</h1>

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br />

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br />

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>菠萝30元<br />

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br /><br />

  总价格:<span id="myspan" >0元</span>

 </body>

</html>

实例三

<html>

 <head>

  <meta charset="utf-8">

  <title></title>

 </head>

 <script type="text/javascript" language="JavaScript">

  function selectCheckbox(obj){

   var fruits=document.getElementsByName("fruit");

   if(obj.innerText=='全选'){

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

     fruits[i].checked=true;

    }

   }else{

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

     fruits[i].checked=false;

    }

   }

  }

  function selectCheckbox2(){

   var fruits=document.getElementsByName("fruit");

   if (mycheckbox.checked){

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

     fruits[i].checked=true;

    }

   }else{

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

     fruits[i].checked=false;

    }

   }

  }

 </script>

 <body>

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br />

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br />

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>菠萝30元<br />

  <input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br />

  <a href="#" onclick="selectCheckbox(this)">全选</a>

  <a href="#" onclick="selectCheckbox(this)">取消</a><br />

  <input type="checkbox" id="mycheckbox" onclick="selectCheckbox2()"/>是否全选

 

forms对象集合/form对象

froms对象集合有:

length :返回大小

item(index):指定取出forms对象集合的第几个form对象,

 

说明当访问某个表单的第几个元素的时候,可以

1.document。forms[第几个表单].元素名字

2.document.forms.item[第几个表单].元素名字