实例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. oracle12c创建用户指定表空间

    --1.创建临时空间 create temporary tablespace zyj_temp tempfile 'D:\app2\user\virtual\oradata\orcl\zyj_temp ...

  2. 根据location地址，在导航栏高亮显示当前页面

    获取当前页面的地址栏.与导航栏中所有<a> 标签的href属性 进行比较.如果相等则高亮显示 此<a>标签. 注意点:a 标签的href 属性在浏览器解析时 是绝对路径. a  ...

  3. Linux下onvif客户端获取h265 IPC摄像头的RTSP地址

    1. 设备搜索,去获取webserver 的地址 ,目的是在获取能力提供服务地址,demo:https://www.cnblogs.com/croxd/p/10683429.html 2. GetCa ...

  4. 详解 Python3 正则表达式（四）

    上一篇:详解 Python3 正则表达式(三) 本文翻译自:https://docs.python.org/3.4/howto/regex.html 博主对此做了一些注明和修改 ^_^ 更多强大的功能 ...

  5. 查内存命令之free

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  6. Noip前的大抱佛脚----文章索引

    Noip前的大抱佛脚----赛前任务 Noip前的大抱佛脚----考场配置 Noip前的大抱佛脚----数论 Noip前的大抱佛脚----图论 Noip前的大抱佛脚----动态规划 Noip前的大抱佛 ...

  7. HBase数据结构（读书笔记 ）

    背景: 最近在做一些跟大数据相关的东西,涉及到数据的存储和分析,考虑各个方面,选择使用HBase进行存储,使用原生Java API进行数据分析,之后会陆续写一系列来说明最近做的东西,给像我这样未曾涉及 ...

  8. python中变量的数据类型总结

    1.变量的数据类型,分为数值型和非数值型 数值型: int(整型) float(浮点型) bool (布尔型,只有True和Flase) compex(复数型, 用于科学计算) 非数值型: str(字 ...

  9. c语言数字图像处理（五）：空间滤波

    空间滤波原理 使用大小为m*n的滤波器对大小为M*N的图像进行线性空间滤波,将滤波器模板乘以图像中对应灰度值,相加得模板中心灰度值 a = (m-1)/2, b = (n-1)/2 若f(x+s, y ...

  10. Kickstart Round H 2018

    打了ks好久都没有更新 诶,自己的粗心真的是没救了,A题大数据都能错 A #include <iostream> #include <cstdio> #include < ...