Java script 的dom编程
实例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编程的更多相关文章
- Java web JavaScript DOM 编程
JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...
- Java Script 编码规范【转】
Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...
- JavaScript（三）-- DOM编程
JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
- Java Script的认识
JavaScript的诞生 1.Java Script诞生于1995年.由Netscape(网景公司)的程序员Brendan Eich(布兰登)与Sun公司联手开发一门脚本语言, 最初名字叫做Mo ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- Dom编程
Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...
- 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）
写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...
- web前端基础——初识HTML DOM编程
1 HTML DOM编程概述 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...
随机推荐
- CPP/类/成员函数访问权限2
// main.cpp // OOL // Created by mac on 2019/4/4. // Copyright © 2019年 mac. All rights reserved. // ...
- Delphi在Android下使用Java库
本文将以Android的USB串口通讯库为例,介绍Delphi如何在Android中使用Java的库. USB串口通讯库地址: https://github.com/felHR85/UsbSerial ...
- day 94 Django学习之django自带的contentType表
Django学习之django自带的contentType表 通过django的contentType表来搞定一个表里面有多个外键的简单处理: 摘自:https://blog.csdn.net/a ...
- 使用promis串行化异步操作
该代码可在chrome下运行,对于低版本浏览器可以引入Q库 function async1() { var defer = Promise.defer() setTimeout(function(){ ...
- pg_stat_statements源代码分析
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页 回到顶级页面:PostgreSQL索引页 pg_stat_statement的源代码,非 ...
- 【转载】CString、BSTR和LPCTSTR之间的区别
原文:http://www.cnblogs.com/GT_Andy/archive/2011/01/18/1938605.html 一.定义 1.CString:动态的TCHAR数组.它是一个完全独立 ...
- 二维码Aztec简介及其解码实现(zxing-cpp)
Aztec Code是1995年,由Hand HeldProducts公司的Dr. Andrew Longacre设计.它是一种高容量的二维条形码格式.它可以对ASCII和扩展ASCII码进行编码.当 ...
- Kubernetes学习之路（十）之资源清单定义
一.Kubernetes常用资源 以下列举的内容都是 kubernetes 中的 Object,这些对象都可以在 yaml 文件中作为一种 API 类型来配置. 类别 名称 工作负载型资源对象 Pod ...
- 团队合作开发git冲突解决方案 Intellij IDEA
https://blog.csdn.net/antony9118/article/details/52524873 注:因为我使用的是 idea 2018.1.2的版本,所以在操作上有些变化 将某些操 ...
- USACO Section1.3
section1.2主要包括5道题和1个编程知识介绍.下面对这6部分内容进行学习. Complete Search 这个翻译成枚举搜索或者穷举搜索.主要用于当写代码时间不够用而且不用考虑程序的效率问题 ...