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