实例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. 浅谈基于FormsAuthentication的认证

    一般情况下,在我们做访问权限管理的时候,会把用户的正确登录后的基本信息保存在Session中,以后用户每次请求页面或接口数据的时候,拿到 Session中存储的用户基本信息,查看比较他有没有登录和能否 ...

  2. PCL利用RANSAC自行拟合分割平面

    利用PCL中分割算法. pcl::SACSegmentation<pcl::PointXYZ> seg; ,不利用法线参数,只根据模型参数得到的分割面片,与想象的面片差距很大, pcl:: ...

  3. MAC mojave版本系统 破解软件

    MAC mojave版本系统 破解软件 1 :Adobe Photoshop CC 2019.0.1 Mac中文破解版 2 :Office 2019 16.19 Mac中文破解版 3 :Paralle ...

  4. Mac开发中遇到的一些小问题解析

    通过mac开发的过程中,有一些小问题出现,列如下,后续会持续增加: 1. 命令行清空废纸篓(jar包太多,倾倒废纸篓太慢) sudo rm -rfv ~/.Trash /Volumes/*/.Tras ...

  5. PHP/Laravel轻松上传超大文件

    我们知道,在以前,文件上传采用的是直接传整个文件的方式,这种方式对付一些小文件是没有问题的.而当需要上传大文件时,此种方式不仅操作繁琐,需要修改web服务器和后端语言的配置,而且会大量占用服务器的内存 ...

  6. Linux下onvif客户端获取ipc摄像头 获取能力：GetCapabilities

    GetCapabilities:获取能力,主要目的获取设备能力信息(获取媒体服务地址) 鉴权:但是在调用获取设备能力之前是需要鉴权的.ONVIF协议规定,部分接口需要鉴权,部分接口不需要鉴权,在调用需 ...

  7. SpringCloud-声明式Rest调用Feign（四）

    前言:一般情况下我们通常使用RestTemplate来实现声明式远程调用,但是当参数过多,那么效率就会变得很低,并且难以维护,所以在微服务当中也有声明式Rest调用的组件Feign 一.Feign简介 ...

  8. Django + Ansible 主机管理(有源码)

    本文给大家介绍如何利用 Django + Ansible 进行 Web 项目管理.   Django介绍 一个可以使 Web 开发工作愉快并且高效的 Web 开发框架,能够以最小的代价构建和维护高质量 ...

  9. 微信小程序中的 hover-class

    微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button ...

  10. 修复bug有哪些更快的技术？做好这6点就够了

    你有没有想过为什么有时修复错误似乎比它应该花费更长的时间?当你终于找到问题时,事实证明你所需要的只是一个小小的改变.然而,花了很多时间才能找到正在发生的事情.这种情况比我想象的更频繁. 另一方面,当您 ...