码迷,mamicode.com
首页 > 编程语言 > 详细

Java script 的dom编程

时间:2015-05-13 21:41:14      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

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

?

?

Java script 的dom编程

标签:

原文地址:http://www.cnblogs.com/chengzhipcx/p/4501571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!