实例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编程的更多相关文章

  1. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

  2. Java Script 编码规范【转】

    Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...

  3. JavaScript（三）-- DOM编程

    JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...

  4. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  5. Java Script的认识

     JavaScript的诞生 1.Java Script诞生于1995年.由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言,  最初名字叫做Mo ...

  6. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  7. Dom编程

    Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...

  8. 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  9. web前端基础——初识HTML DOM编程

    1 HTML DOM编程概述 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...

随机推荐

  1. JS控制上传文件个数

    <html><body>    <h3>js控制文件上传数量</h3>    <form action="" enctype= ...

  2. linux 系统运行级别一般为 0-6，请分别写出每个级别的含义

    每个运行级别的含义 0   关机模式(不要把启动级别  运行级别设置为0) 1   单用户模式 2   无NFS多用户模式 3   文本模式(命令行模式,完整的多用户模式) 4   未使用的 5   ...

  3. webBrowser.Document.Cookie取不到HttpOnly的Cookie，取Cookie不完整

    在做数据采集时,有些网站需要输入验证码,但各网站验证码都不同,不可能有完美的识别验证码的代码,所以我也没去研究,我所采取的方案是:在winform里通过WebBrowser调用网页先手动登录系统,然后 ...

  4. 10.21 （上午） 开课一个月零十七天 （PHP基础语法）

    <?php $a = 6; echo $a; //注释语法 /* 多行注释 */ //输出语法 echo "hello"; echo "world",&q ...

  5. tomcat ： 虚拟路径映射

    tomcat设置虚拟访问地址和真实路径的映射,方法有几种,这里介绍常用的两种方式: 一.修改server.xml文件: 步骤如下:  1.在tomcat根目录下打开conf文件夹,该文件夹下有个ser ...

  6. HBase数据模型的一些概念

    首先来先理解一个概念:HBase是一种列式存储的分布式数据库. 表              在HBase中数据以表的形式存储.使用表的主要原因是把某些列组织起来一起访问,同一个表中的数据通常是相关的 ...

  7. [SHOI2008]仙人掌图

    [SHOI2008]仙人掌图 LG传送门 还不会仙人掌的同学可以看看我对仙人掌知识的一些梳理. 题意就是求仙人掌的直径,直径定义为图中最短路径最长的两点间的最短路径长度. 按照套路,先考虑求树的直径我 ...

  8. cvc-complex-type.2.4.a: Invalid content was found starting with element 'display-name'

    cvc-complex-type.2.4.a: Invalid content was found starting with element 'display-name'. One of '{&qu ...

  9. Hbase第五章 MapReduce操作HBase

    容易遇到的坑: 当用mapReducer操作HBase时,运行jar包的过程中如果遇到 java.lang.NoClassDefFoundError 类似的错误时,一般是由于hadoop环境没有hba ...

  10. Linux常用系统命令大全

    最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大.我将我了解到的命令列举一 ...