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[第几个表单].元素名字
