实例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. elasticsearch 请求体查询方式整理

    空查询(empty search) —{}— 在功能上等价于使用 match_all 查询, 正如其名字一样,匹配所有文档: GET /_search { "query": { & ...

  2. IIC总线（集成电路总线）

    三大串行总线:UART.SPI.IIC(其中SPI是由时钟沿采集数据,为同步接口:UART和IIC是由电平采集数据,为异步接口) IIC速率:工作在半双工方式,2根线(SCL和SDA) 标准:100k ...

  3. Lint Code 1365. Minimum Cycle Section

    这题可以看作POJ 1961 最小循环节的一个简化版本.某补习班广告贴里给出的两个指针的参考解法简直大误. 受POJ 1961的启发,把数组看作字串,观察可知,如果字串全部由循环节构成(包括最后一段是 ...

  4. spring-data-jpa快速入门（二）——简单查询

    一.方法名解析 1.引言 回顾HelloWorld项目中的dao接口 public interface GirlRepository extends JpaRepository<Girl, In ...

  5. mybatis第一天——入门与概述

    大纲摘要: 1.mybatis的介绍 2.Mybatis的入门 a) 使用jdbc操作数据库存在的问题 b) Mybatis的架构 c) Mybatis的入门程序 3.Dao的开发方法 a) 原始da ...

  6. Qt5.4 All Modules

    Qt5.4 All Modules Qt Essentials Qt essentials define the foundation of Qt on all platforms. They are ...

  7. 【SDOI2017】新生舞会

    题面 题解 一眼\(0/1\)分数规划 二分答案\(mid\),我们要\(\sum\limits_i a^{'}_i - mid\sum\limits_i b_i^{'}\)最大 那么我们将\(a_{ ...

  8. 【BZOJ1048】 [HAOI2007]分割矩阵

    [BZOJ1048][HAOI2007]分割矩阵 题面 bzoj 洛谷 题解 \(dp[a][b][c][d][num]\)表示将矩形\((a,b,c,d)\)分成\(num\)个的最小方差,然后转移 ...

  9. Kubernetes学习之路（十四）之服务发现Service

    一.Service的概念 运行在Pod中的应用是向客户端提供服务的守护进程,比如,nginx.tomcat.etcd等等,它们都是受控于控制器的资源对象,存在生命周期,我们知道Pod资源对象在自愿或非 ...

  10. JAVAWEB servlet验证登录时进行完全的非空判断防止空值登录

    如果不进行完全的非空判断,那么对 "" 这种类型的空值就会导致直接登录 所以需要用下面的字符串处理方法对其进行判断 这样就可以防止空值登录了 容易出现的混淆错误: 这里的空值登录容 ...