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树,要改 ...
随机推荐
- css3--js-jq动画效果
最近写网页时才发现原来css3的动画效果感觉还不错哦!但自己以前学的时候却没有当作重点,现在从新学习一下: 1:原理: 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式.在动画过程中,您能够 ...
- Linux文本编辑器-vi/vim
vi是Linux命令行界面下的文字编辑器,vim是vi的增强版(Vi IMproved),完全兼容 可以理解成普通的txt文本与word文档之间的差距. 注:还有一款全屏编辑器是nano,可以了解下 ...
- 一图看懂hadoop MapReduce工作原理
MapReduce执行流程及单词统计WordCount示例
- react-native使用redux 存在的坑
前几天安卓真机测试的时候,突然发现一个严重的问题. 后退两次退出应用,再开启白屏.而杀掉进程后再开启就是好的. 这个重大bug我跟了好久,以为是splash-screen的问题. 后来一点一点打con ...
- springboot-web进阶(四)——单元测试
一.概述 基础知识,参考:https://www.cnblogs.com/ysw-go/p/5447056.html 二.springboot的单元测试 1.入门测试类 最重要的不要忘记类上面的依赖, ...
- Oracletop10物理段
Oracletop10物理段 select owner, name, type, mega, tbs from (select owner, case when segment_type = 'LOB ...
- 20155220 吴思其 《网络攻防》 Exp1 PC平台逆向破解(5)M
20155220 <网络攻防> Exp1 PC平台逆向破解(5)M 实践内容 通过对实践对象--20155220pwn1的linux可执行文件的修改或输入,完成以下三块: 手工修改可执行文 ...
- 2015306 白皎 《网络攻防》Exp1 进阶
2015306 白皎 <网络攻防>Exp1 进阶 Task1 64位shellcode的编写及注入 - 自己编写一个64位shellcode.参考shellcode指导. - 自己编写一个 ...
- My97DatePicker:开始时间和结束时间的最大间隔为1个月30天,并且不大于当前时间(3种方法)
问题的背景 在之前做Web项目的时候,开始时间和结束时间,只有2个要求: 1.开始时间必须小于等于结束时间,不能超过当前时间. 2.结束时间必须大于等于开始时间,不能超过当前时间. 由于开始时间不大于 ...
- Eclipse无法查看源码 提示source not found
学习项目代码的时候想要看一下Cookie的源码,已经确定下载到了本地,可是Ctrl+左键点进去,提示source not found(如下图),百度了以后,大家普遍认为需要安装反编译插件jad. 看了 ...