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[第几个表单].元素名字

?

?

时间: 2024-10-18 17:42:02

Java script 的dom编程的相关文章

【DOM编程艺术】getElementsByClassName

<div id='shop'> <div class='a1 a2'>111</div> <div class='a1 a3'>222</div> <div class='a2 a3'>333</div> </div> <script type="text/javascript"> function getElementsByClassName(node,classname){

【DOM编程艺术】jquery代码

<script> $(resetFields); //相当于addLoadEvent(resetFields);会弹出1111 function resetFields(){ alert(111); } </script> resetFields函数 <script> $(resetFields); function resetFields(){ $('form input[placeholder]').focus(function(){ var input = $(t

Java Script 基础一

什么是java script 如何编写,调试js ***变量 ***数据类型 一.什么是java script HTML:专门编写网页内容的语言,构建整体框架. CSS:专门美化网页样式的语言,具有"装修功能". JS:专门编写交互的程序语言 交互:用户操作,程序处理用户的操作,返回处理结果 如何运行: 浏览器:内容排版引擎   js解释引擎 内容排版引擎:专门解析HTML和渲染CSS的软件 JS解析引擎:专门解释,并执行js程序的软件 什么是解释和脚本? 解释:默认从上向下,读一行,

【读书札记】《JavaScript DOM编程指南》

对于Javascript的认识是来自于2011年夏天去实训基地做的一个网页项目,当时认为JavaScript是不是Java的一个派别语言什么的,老师那时候教我们调用了一些Javascript的方法.当时对这个语言的最初的印象就是会调用方法大致能懂就行了,没有深究.直到今年年初去面试几家企业,问我会不会使用Javascript,我说就调调几个方法就好了~   当时瞬间就直到无地自容了.于是将这本JavaScript的电子书看了下,写下相关的读书札记,也希望能让和我有着对Javascript误解的人

Java Script 编码规范

Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript 语言规范, 5.1 版 基本原则: 无论有多少人在维护,所有在代码仓库中的代码理应看起来像同一个人写的. 前言 下面的章节描述的是一个 合理 的现代 JavaScript 开发风格指南,并非硬性规定.其想送出的核心理念是高度统一的代码风格(the law of code style consiste

轻松学习JavaScript二十二:DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点 操作方法: 还是借用一贯的HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

【DOM编程艺术】综合示例

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Jay Skript And The Domsters</title> <script src="scripts/modernizr-1.6.min.js"></script> <l

JS之DOM编程

为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Model(文档对象模型),根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件. js把浏览器,网页文档和网页文档中的html元素都用相应的内置对象来表示,这些对象与对象间的层次关系称为dom,针对网页(html,jsp,php,as

基于JS的DOM 编程基础和Json语法及JS下的AJAX基础

1.在dom编程中:     注意:使用dom操作一般在页面完全载入之后,一般在window_onload事件里操作dom nodeName  表示节点的名称如:<input   type= "button"  value="确定" />    此时nodeName=“input” ; nodeValue  表示节点的值如<p>aaa</p> 此时的nodeValue="aaa",而nodeName="