实例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. Ext4文件系统架构分析(三) ——目录哈希、扩展属性与日志

    struct dx_root Htree的内部节点: struct dx_node Htree 树根和节点中都存在的 Hash map: struct dx_entry 1.20 扩展属性EA 扩展属 ...

  2. GoodUserInterface 模仿页面功能

    模仿一些好的应用中的好的界面或功能.平时使用的APP有很多,其中一些都是常见的功能的拼凑,在业务层面比较复杂,而具体的页面实现都很类似.在这种情况下,我们还会发现有一些APP的页面效果的实现方式比较独 ...

  3. OpenJudge 4001:抓住那头牛

    题目链接 题解: 这个题可以用广搜来解决,从农夫到牛的走法每次都有三种选择,定义一个队列,把农夫的节点加进队列,然后以这三种走法找牛,队列先进先出,按顺序直到找到牛的位置. 代码: #include& ...

  4. jekyll建站详细教程

    Jekyll是一款静态博客生成器,也是github page支持的后台引擎,所以如果你有以下需求,极力推荐使用jekyll搭建博客,>>浏览我的博客 个性化的展示界面,站点逻辑 个性化的域 ...

  5. 查询mssql的死锁语句

    都是从网上找的,只是记录一下,可能用到. 查询死锁,要在当前数据库下,否则tableName列得不到正确信息select    request_session_id spid,OBJECT_NAME( ...

  6. stat命令的实现-mysate 20155239吕宇轩

    stat命令的实现-mysate 20155239吕宇轩 学习使用stat(1),并用C语言实现 提交学习stat(1)的截图 man -k ,grep -r的使用 伪代码 产品代码 mystate. ...

  7. linux java jdk环境变量设置之后,依旧提示 No such file or directory

    今天又默默的在linux下安装java 明明是很简单的事情,在~/.bashrc中添加如下内容: export JAVA_HOME=/home/ubuntu/jdkexport CLASSPATH=. ...

  8. Eclipse Git提交代码，多了一个“工程同名的文件夹”，找不到解决办法！！！

    提交代码到Git仓库,有2种方式. 第1种,先在OSChina等平台创建git项目,本地clone,再在本地修改代码提交.√ 这种方式,没任何问题. 不过,我平时不喜欢这么干. 第2种,本地已经有了项 ...

  9. Oracle OEM启动方法

    首先要启动 listener: lsnrctl start 对于dbconsole:emctl start dbconsole

  10. 如何查看win2003是32位还是64位

    如何查看自己的电脑是32位还是64位 方法如下: 点击开始——运行——输入wmic cpu get addresswidth