【Java学习20170419】JavaScript之DOM技术

最新推荐文章于 2023-10-17 22:22:09 发布
最新推荐文章于 2023-10-17 22:22:09 发布
阅读量281 收藏
点赞数 1
分类专栏： Java学习 文章标签： java css dom javascript java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linsila8121/article/details/70244795
版权

JavaScript之DOM技术


Javascript实现简易计算器

<html>
<head>
<title>计算器</title>

<style>
td {
	color: red;
	font-size: 20px;
	width: 50px;
}

input {
	margin: 0px;
	width: 50px;
	height: 50px;
}
</style>





</head>

<body>


	<table border="2" align="center" bgcolor="#dddddd">

		<tr height="100">
			<td align="right" valign="middle" colspan="5" style="font-size: 50px">
				<p id="p1">0</p>
			</td>
		</tr>
		<tr height="50">
			<td align="center" valign="middle"><input type="button"
				value="MC"></td>
			<td align="center" valign="middle"><input type="button"
				value="MR"></td>
			<td align="center" valign="middle"><input type="button"
				value="MS"></td>
			<td align="center" valign="middle"><input type="button"
				value="M+"></td>
			<td align="center" valign="middle"><input type="button"
				value="M-"></td>
		</tr>
		<tr height="50">
			<td align="center" valign="middle"><input type="button"
				value="←"></td>
			<td align="center" valign="middle"><input type="button"
				value="CE"></td>
			<td align="center" valign="middle"><input type="button"
				value="C" οnclick="clean()"></td>
			<td align="center" valign="middle"><input type="button"
				value="+/-"></td>
			<td align="center" valign="middle"><input type="button"
				value="√"></td>
		</tr>
		<tr height="50">
			<td align="center" valign="middle"><input type="button"
				value="7" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="8" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="9" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="/" οnclick="fu(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="%"></td>
		</tr>
		<tr height="50">
			<td align="center" valign="middle"><input type="button"
				value="4" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="5" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="6" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="*" οnclick="fu(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="1/x"></td>
		</tr>
		<tr height="50">
			<td align="center" valign="middle"><input type="button"
				value="1" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="2" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="3" οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="-" οnclick="fu(this)"></td>
			<td align="center" valign="middle" rowspan="2"><input
				type="button" value="=" style="height: 100px"  οnclick="deng()"></td>
		</tr>
		<tr height="50">
			<td align="center" valign="middle" colspan="2"><input
				type="button" value="0" style="width: 100px"  οnclick="txclick(this)"></td>
			<td align="center" valign="middle"><input type="button"
				value="."></td>
			<td align="center" valign="middle"><input type="button"
				value="+" οnclick="fu(this)"></td>


		</tr>

	</table>

	<script language="javascript">
	/*
		1、录入第一个操作数
		2、录入符号
		3、录入第三个操作数
		4、等于
	*/
		var firstvalue = 0;//存储第一个操作数
		var secondvalue = 0;//存储第二个操作数
		var s = "";//存储符号
		var flag = 0 ;//flag为0时，表示现在正在录入第一个操作数，非0时录入第二个操作数
		var flag_a = 0;//给第一个操作数赋值时，flag_a为0，表示第一个操作数还没有初始值，可以直接赋值，否则将数值连接起来
		var showresult = document.getElementById("p1");//通过id获取显示的标签对象
		var showvalue="";//每次录入的值之后的结果
		//数字区域点击触发事件
		function txclick(mybutton) {
			if (flag == 0) {
				if(flag_a==0){
					showvalue = parseInt(mybutton.value);
					flag_a = 1;
				}else {
					showvalue = parseInt(showvalue+""+mybutton.value);
				}				
				firstvalue=showvalue;
			} else {
					if(flag==1){//第一次给第二个操作数赋值
						showvalue = parseInt(mybutton.value);
						flag=flag+1;
					}else{
						showvalue = parseInt(showvalue+""+mybutton.value);
					}
				secondvalue = showvalue;
			}

			showresult.innerHTML = parseInt(showvalue);

		}

		//运算符点击触发事件
		function fu(but) {
			flag = 1;
			s = but.value;
			showresult.innerHTML = s;
		}

		//等号点击事件
		function deng() {
			var result = 0;
			if (s == "+") {
				result = firstvalue + secondvalue;
			} else if (s == "-") {
				result = firstvalue - secondvalue;
			} else if (s == "*") {
				result = firstvalue * secondvalue;
			} else {
				result = firstvalue / secondvalue;
			}
			showresult.innerHTML = result;
			flag = 1;
			firstvalue = result;
		}
		//
		function clean(){
			firstvalue = 0;
			secondvalue = 0;
			flag = 0;
			flag_a = 0;
			s = "";
			showresult.innerHTML =0;
		}
	</script>
</body>


</html>

Javascript实现有序列表增加和删除 

<html>
<body>
	<ol id="l">  
        <li>张三</li>  
        <li>李四</li>  
    </ol>  
	<input type="text" name="name" ></input>  
	<input type="button" οnclick="addlist()" value="添加"></input> 
	<script>
		function addlist()  
		{  
			var para=document.createElement("li");//这段代码创建新的<li>元素  
			var node=document.createTextNode(document.getElementsByName("name")[0].value);//如需向<li>元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点  
			para.appendChild(node);//向<li>元素追加了这个文本节点  
			//最后必须向一个已有的元素追加这个新元素  
			var element=document.getElementById("l");//这段代码找到一个已有的元素  
			element.appendChild(para);//这段代码向这个已有的元素追加新元素   
          
        }  
	</script>
</body>
</html>

<html>
<body>
	<ol id="l">
        <li>张三</li> 
        <li>李四</li>
    </ol>  
	<input type="text" name="name" ></input>  
	<input type="button" οnclick="addlist()" value="添加"> 
	<input type="button" οnclick="deletelist()" value="删除">
	<input type="button" οnclick="showlist()" value="显示">
	<script>
		var i = 0;
		function addlist()  
		{  
			i=i+1;
			var para=document.createElement("li");//这段代码创建新的<li>元素  
			var node=document.createTextNode(document.getElementsByName("name")[0].value);//如需向<li>元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点  
			para.appendChild(node);//向<li>元素追加了这个文本节点 
			para.name="tx";
			para.id="tx"+i;
			//最后必须向一个已有的元素追加这个新元素  
			var element=document.getElementById("l");//这段代码找到一个已有的元素  
			element.appendChild(para);//这段代码向这个已有的元素追加新元素   
          
        } 

		function deletelist(){
			if(i<=0){
				return ;
			}
			var element=document.getElementById("l");//这段代码找到一个已有的元素  
			var myli = document.getElementById("tx"+i);
			element.removeChild(myli);
			i=i-1;
		}
		
		function showlist(){
			var element=document.getElementById("l");
			var a= element.childNodes;
			for(var i=0;i<a.length;i++){
			
				var b = a[i];
				alert(b.nodeType);
				//nodeType类型:元素 1;属性 2;文本 3;注释	8;文档 9
				switch(b.nodeType){
				case 1:
					alert("元素"+b.nodeType);
					break;
				case 2:
					alert("属性"+b.nodeType);
					break;
				case 3:
					alert("文本"+b.nodeType);
					break;
					default:
					alert("其他"+b.nodeType);
				
				}
				
			}
			
		
		}
	</script>
</body>
</html>

Javascript遍历HTML网页中的所有元素的节点 

<!DOCTYPE html>
<html>
	<head>
		<title>一个简单的文档</title>
		<script language="javascript">
			var elementList = "";//全局变量，保存Element标记名，使用完毕要清空
			function getElement(node){//参数node是一个Node对象
				var total=0;
				//nodeType类型：元素1；属性2；文本3；注释8；文档9
				if(node.nodeType == 1){//检查node是否为Element对象
					total++;//如果是，计数器加1
					elementList = elementList + node.nodeName + "、";//保存标记名
				}
				var childrens = node.childNodes;//获得node的全部子节点
				for(var m = node.firstChild;m!=null;m = m.nextSibling){
					total += getElement(m);//对每个子节点进行递归操作
				}
				return total;
			}
			function show(){
				var number = getElement(document);//获取标记总数   document里面都包含什么？？？？？？？？？？？？？？？？？？？？、
				elementList = elementList.substring(0,elementList.length-1);
				alert("该文档中包含："+elementList+"等"+number+"个标记！");
				elementList="";//清空全局变量
			}
		</script>
	</head>
	<body οnlοad="show()">
		遍历HTML网页中的所有元素的节点
		<br>
		<a href="http://www.baidu.com">http://www.baidu.com</a>
	</body>
</html>

Javascript增加和删除段落 

<!DOCTYPE html>
<html>
	<head>
		<title>添加删除节点</title>
	<script language="javascript">
		function add(){
			var para =document.createElement("p");
			var node =document.createTextNode("这是一个新段落");
			para.appendChild(node);
			
			var element = document.getElementById("div1");
			element.appendChild(para);
		}
		function delete1(){
			var parent=document.getElementById("div1");
			var child =document.getElementById("p1");
			parent.removeChild(child);
		}
	</script>
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是二个段落。</p>
		</div>
		<input type="button" value="增加" id="add" οnclick="add()">
		<input type="button" value="删除" id="delete" οnclick="delete1()">
	</body>
</html>

Javascript有序列表增加和删除 

<!DOCTYPE html>
<html>	
	<head>
		<title>增加有序列表</title>
	<script language="javascript">
		
		function add(){
			var c = document.getElementById("text1").value;
		
		
			var a = document.getElementById("id1");
			var para = document.createElement("li");

			var node = document.createTextNode(c);
			para.appendChild(node);
			
			a.appendChild(para);
		}
		function delete1(){
			var a =document.getElementById("id1");
			var b=a.lastChild;
			if(a.firstChild.nextSibling.nextSibling.nextSibling.nextSibling!=null){
					a.removeChild(b);
			}
			var c=a.lastChild;
			if(a.firstChild.nextSibling.nextSibling.nextSibling.nextSibling!=null){
					a.removeChild(c);
			}
		}
	</script>
	</head>
	<body id="body1">
		<ol id="id1">
			<li>sb1</li>
			<li>sb2</li>
			<li>sb3</li>
			<li>sb4</li>
		</ol>
		<input type="text" id="text1">
		<input type="button" id="show" value="添加" οnclick="add()">
		<input type="button" id="delete1" value="删除" οnclick="delete1()">
		
	</body>
</html>

Javascript时间显示 

<!DOCTYPE html>
<html>
	<head>
		<title>时间显示器</title>
	<script language="javascript">
		function clockon(bgclock){
			var now = new Date();
			var year = now.getYear();
			var month = now.getMonth();
			var date = now.getDate();
			var day = now.getDay();
			var hour = now.getHours();
			var minu = now.getMinutes();
			var sec = now.getSeconds();
			var week;
			month = month+1;
			if(month<10){
				month = "0"+month;
			}
			if(date<10){
				date = "0"+date;
			}
			if(hour<10){
				hour = "0"+hour;
			}
			if(minu<10){
				minu = "0"+minu;
			}
			if(sec<10){
				sec="0"+sec;
			}
			var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
			week = arr_week[day];
			var time = "";
			time = (year+1900) + "年" + month + "月" + date + "日 " + week + " " + hour + ":" + minu + ":" + sec;
			bgclock.innerHTML ="系统公告：【"+time+"】";
			var timer = setTimeout("clockon(bgclock)",200);
		}
	</script>
	</head>
	<body onLoad="clockon(bgclock)">
		<table width="100%" height="45" border="0" cellpadding="-2">
			<tr>
				<td><div id="bgclock" class="word_grey"></div></td>
			</tr>
		</table>
	</body>
</html>
Javascript闪瞎你的狗眼 

<!DOCTYPE html>
<html>
	<head>
		<title>闪瞎你的狗眼</title>
		<script language="javascript">
			var i =0;
			var color = new Array("#0000FF", "#99FF00", "#660033", "#CC66CC", "#FFFF33");
			function change(){
				if(i>color.length-1)
					i=0;
				table1.style.borderColor=color[i];
				i+=1;
				setTimeout("change()",500);
				
			}
		</script>
	</head>

	<body οnlοad="change()">
		<table id="table1" align="center" border=5>
			<tr>
				<td>闪闪闪</td>
			</tr>
			<tr>
				<td><pre>靓靓靓</pre></td>
			</tr>
		</table>
	</body>
</html>

作业： 

<!DOCTYPE html>
<html>
	<head>
		<title>也门Ogygia监狱</title>
	<link rel="stylesheet" type="text/css" href="style.css">	
	<script language="javascript">
		var i =0;
		var n =0;
		//发表人和内容
		function fabiao(){
			i=i+1;
			//获得评论内容
			var pinglun = document.getElementById("neirong");
			//获得人
			var pinglunren1 = document.getElementById("ren");
			//创建节点p
			var node=document.createElement("p");
			var node1=document.createElement("p");
			//创建内容
			var pare=document.createTextNode(pinglunren1.value);
			var pare1 = document.createTextNode(pinglun.value);
			node.appendChild(pare);
			node.id="zyq"+i;
			node1.appendChild(pare1);
			node1.id="zyq1"+i
			var element = document.getElementById("pinglunren");
			var element1 = document.getElementById("pinglunneirong");
			element.appendChild(node);
			element1.appendChild(node1);
		}
		//删除第一行
		function shanchu11(){
			n=n+1;
			//获得节点
			var node = document.getElementById("pinglunren");
			var node1 = document.getElementById("pinglunneirong");
			//获得第一个子节点
			var node_child = document.getElementById("zyq"+n);
			var node1_child = document.getElementById("zyq1"+n);
			//删除第一个子节点
			node.removeChild(node_child);
			node1.removeChild(node1_child);
		}
		//删除最后一行
		function shanchu21(){
			if(i<=0){
				return;
			}
			//获得节点
			var node = document.getElementById("pinglunren");
			var node1 = document.getElementById("pinglunneirong");
			//获得第一个子节点
			var node_child = document.getElementById("zyq"+i);
			var node1_child = document.getElementById("zyq1"+i);
			//删除第一个子节点
			node.removeChild(node_child);
			node1.removeChild(node1_child);
			i=i-1;
		}
	</script>
	</head>
	<body id="mybody">
		<form method="" action="" id="myform">
			<table id="mytable" style="position:absolute;left:400px;top:200px;border-style:solid;">
				
				<tr style="border-style:solid;">
					<td colspan="2">评论人:</td>
					<td colspan="2"><input style="width:230px;height:40px;" type="text" id="ren"></td>
				</tr>
				<tr>
					<td colspan="2">评论内容：</td>
					<td colspan="2" ><textarea cols="30" rows="10"id="neirong"></textarea></td>
				</tr>
				<tr>
					<td><input type="button" id="fabiao1" value="发表" οnclick="fabiao()"></td>
					<td><input type="reset" id="chongzhi1" value="重置"></td>
					<td><input type="button" id="shanchu1" value="删除第一行评论" οnclick="shanchu11()"></td>
					<td><input type="button" id="shanchu2" value="删除最后一行评论" οnclick="shanchu21()"></td>
				</tr>
				<tr>
					<td colspan="2" ">评论人</td>
					<td colspan="2" ">评论内容</td>
				</tr>
				<tr>
					<td colspan="2" id="pinglunren" ></td>
					<td colspan="2" id="pinglunneirong"></td>
				</tr>
				<tr>
					*以下用户言论只代表其个人观点，不代表本网站的观点或立场
				</tr>
			<table>
		</form>
	</body>
</html>

@CHARSET "UTF-8";
body{
	background-image:url("123.jpg");
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-size:cover;
	font-family:新宋体;
}



张渔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】DOM
Komorebi_00的博客
07-04 164
文档对象模型 (DOM) 定义访问和处理HTML文档的标准方法。DOM 将HTML文档描述为带有元素、属性和文本的树结构（节点树）。描述处理网页内容的方法和接口.
【JavaScript】17 - DOM
郑SaScha的博客
07-28 268
关于DOM的介绍
JavaScript之DOM
qq_43751200的博客
06-05 1773
DOM
Java学习路线总结，搬砖工逆袭Java架构师
热门推荐
学Java，找哪吒
09-07 25万+
定期分享Java硬核技术干货、分享Java学习路线、分享Java经典面试题
【Java 进阶篇】JavaScript DOM Document对象详解
最新发布
繁依Fanyi的博客
10-17 1235
DocumentDocument对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。希望这篇博客对初学者有所帮助，使他们更好地理解Document对象及其用途。
javascript学习基础笔记之DOM对象操作
01-19
DOM（文档对象模型）是Web开发中的核心概念，它为HTML和XML文档提供了一种结构化的表示方式。这个API允许开发者通过编程的方式访问和修改页面的结构、...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
JavaScript之DOM_动力节点Java学院整理
12-09
JavaScript中的DOM（Document Object Model）是HTML或XML文档的一种结构化表示，它将网页内容...需要注意的是，DOM操作可能会对性能造成影响，因此在处理大量数据时，应尽可能减少DOM操作，或者使用虚拟DOM技术来优化。
javascript DOM编程实例(智播客学习)
01-19
并给我们讲解了很多关于如何去学习DOM的方法，觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下。 1.二级连动下拉菜单（一级是省份，二级是城市，要求一级选中省份，二级城市对应出现） 步骤：1）...
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
【JavaScript DOM操作】DOM（Document Object Model）是用于表示网页或文档的一种标准，它使得我们可以通过JavaScript等脚本语言对网页内容进行动态操作。本文主要介绍JavaScript中的DOM插入、更新和删除操作。 **1...
【Java 5班第2次考试】
linsila8121的博客
04-11 2014
Java 5班第2次考试 一、选择题（每题1分 共15分） 1、关于继承的说法正确的是（　A　） A)子类将继承父类所有的属性和方法 B)子类将继承父类的非私有属性和方法 C)子类只继承父类public方法和属性 D)子类只继承父类的方法，而不继承属性   2、重写与重载的关系是（　A　） A)重写只有发生在父类与子类之间，而重载可以发生在同一个类中 B)重写方法可以不同名，而
【Java学习20170510】MySQL考试
linsila8121的博客
05-10 1551
MySQL复习 导入xs_kc.sql INSERT INTO `xs_kc` VALUES ('81101', '101', '80', '5'); INSERT INTO `xs_kc` VALUES ('81101', '102', '78', '4'); INSERT INTO `xs_kc` VALUES ('81101', '206', '76', '4'); INSERT INT
【Java 5班JAVA阶段型考试】
linsila8121的博客
04-11 915
Java 5班JAVA阶段型考试 一、选择题（20分） 1、int x = 1，y=2,z = 3,则表达式 y+=z--/++x运行之后y的值是（ A  ）。//y=y+(z/(x+1)); A.3      B.3.5       C.4      D.5   2、不允许作为类及类成员的权限控制符的是（  C   ）。 A.public  B.private C.static  
【Java学习20170427】Servlet过滤器和监听器
linsila8121的博客
04-27 616
JavaWeb Servlet过滤器和监听器 package com.tx.demo2; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet
【Java学习20170411】反射+Json解析
linsila8121的博客
04-11 584
第七章 1、反射： 1）、用来实心动态代理； 2）、在运行过程中动态获取对象的类型； 3）、在运行过程中，动态加载对象； 4）、在运行过程中，动态的调用对象的方法； 5）、常常用来实现框架 2、Object是所有类型的父类，Java所有类型，包括自定义类型都默认继承Object 3、Class类型：反射技术的核心类，通过这个类，完成所有反射技术的实现，获取class对象的三种方法：
【Java学习20170413】Excel文件读写
linsila8121的博客
04-13 551
Excel文件读取与写入 运用POI方式实现 package com.share.read; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import java.util.ArrayList; import java.util.List; import org
【Java学习20170420】JSP基础
linsila8121的博客
04-20 474
JSP基础 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%> 第一个JSP页面 <% //out是一个内置对象，专门用于输出文本信息 out.println("嵌入的JAVA代码"); out.p
【Java学习20170418】CSS
linsila8121的博客
04-18 415
JavaWeb 第二章CSS Demo06.html a { color: red; font-size: 50px; } <a href="message.html">查看详情 查看详情 <a href="message.html">查看详情 查看
【Java学习20170521】JavaScript复习
linsila8121的博客
05-21 384
JavaScript代码 01 var price = 992; //定义商品单价 var number = 10; //定义商品数量 var sum = price * number; //计算商品金额 alert(sum); //显示商品金额 02 无标题文档 function check() { if (form1.user.value == "") {
【Java学习20170503】MySQL
linsila8121的博客
05-03 371
MySQL和SQL 导入sql文件 1、xs_kc.sql /* Navicat MySQL Data Transfer Source Server : tangxin Source Server Version : 50540 Source Host : localhost:3306 Source Database : tangxi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值