java学习笔记33

最新推荐文章于 2023-12-30 22:08:53 发布

huakaiba

最新推荐文章于 2023-12-30 22:08:53 发布

阅读量408

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/huakaiba/article/details/40350273

版权

学习笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

1、DOM : Document Object Model(文档对象模型)

当遇见html文档时，游览器用DOM技术对其解析，先将文档封装对象（命名为document），

通过将文档解析为DOM树，就可以很方便的操作文档中的标签。为实现动态页面做出了贡献。

2、DOM解析和SAX解析

3、DOM的三级模型

名称空间可以使域名（不管这个域名存在不存在，反正只是个名字，用来区别的，避免重名标签）

4、DHTML概述

之前CSS+HTML只是静态的，但是想要动态的HTML就要包含HTML，CSS，DOM，javascript四种技术 .

5、DOM （BOM&Navigator对象&History对象）

一打开游览器，游览器的窗口已经加载在内存中了。

窗口一打开，window对象就已经存在了，调用Window对象是，可以不写window.，直接调用方法。

一点击按键，就会显示游览器的信息，程序如下：

6、DOM的location对象

下面程序实现按下一个按钮跳转到一个网址：

通过location.href的设定就可以实现该店地址栏的值，默认得到的地址就是本HTML文件的本地FIle类型的地址。也可以修改href的值，让他实现点击按钮，实现跳转到服务器的特定网址。

7、Window对象的常见方法

alert（）函数也是Window对象的方法

confirm（）方法就是弹出确定，取消窗口、

9、window常见事件。

onload（）就是页面数据加载完之后运行，onbeforeunload()就是页面对象呗卸载之间运行，简单地说就是关闭页面时运行。onunload就是页面关闭后运行。

10、小广告练习

小广告的写法如下：

onunload()保证在探出来后，你点关闭广告，它有重新弹出。而setInterval保证每隔一秒调用focus（）函数，也就是每隔1s广告窗口出现在显示器中间。

主程序：

11、节点类型为1代表标签型节点，节点内容是空代表这个节点是用来封装数据的，本身没有值。属性节点和文本节点都有值，就是里面的文本数据或者=后面的文字。

获得节点后就可以对里面的文本数据进行获取或者修改。

name相当是组名，多个标签可以是name一样，就像前面的男，女name都是sex，但是id是唯一的。

document.getElementById得到的是一个标签节点。而document.getElementsByName得到的是一组标签。

文本框里可以写value=“sda”，也可以不写value，在页面中输入是什么value就是什么。

标签里target属性是指定超链接打开的地方，如果target = "_blank",则表示是在新的页面打开那个超链接。如果不写taget则是默认在原网页上打开超链接。

标签名如input, div,a 就是标签开头的第一个字母。<div id....> <a href=".....">

tagName就是标签名。容器标签例如div这种的内部还可以在定义标签，div这种容器标签都有getElementsByTagName方法，因为标签都有标签名，但是没有getElementsByName,getElementByI的，因为容器里面的标签不一定都有name和id属性。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		
		<!--
		document对象的演示。
		
		该对象将标记型文档进行封装。
		该对象的作用，是对可以标记型文档进行操作。
		最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。
		要想获取节点，必须要先获取到节点所属的文档对象document。
		
		所以document对象最常见的操作就是获取页面中的节点。 
		
		获取节点的方法体现：
		1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。
		2，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
		3，getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。
		
		凡是带s返回的都是数组。
		-->
		
		<script type="text/javascript">
			function getNodeDemo(){
				
				/*
				 * 需求：获取页面中的div节点。
				 * 思路：
				 * 通过docment对象完成。因为div节点有id属性。 所以可以通过id属性来完成获取。 
				 * 
				 */
				var divNode = document.getElementById("divid");
				
				//节点都有三个必备的属性。节点名称，节点类型，节点值。
//				alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
				/*
				 * 常见节点有三种：
				 * 1，标签型节点：类型 1
				 * 2，属性节点：     类型 2
				 * 3，文本节点。     类型 3
				 * 
				 * 标签型节点是没有值的，属性和文本节点是可以有值的。
				 * 
				 */
				
				//获取div节点中的文本。
//				var text = divNode.innerHTML;				
//				alert(text);
				//改变div中的文本。
				divNode.innerHTML = "哈哈，文本被我改掉了".fontcolor("red");
			}
			
			
			
			//获取文本框节点演示getElementsByName方法
			function getNodeDemo2(){
				
//				var nodes = document.getElementsByName("user");
//				alert(nodes[0].value);
				var userNode = document.getElementsByName("user")[0];
				alert(userNode.value);
			}
			
			
			//获取超链接节点对象。演示getElementsByTagName方法。
			function getNodeDemo3(){
				
				//直接用标签名获取。 
				var nodes = document.getElementsByTagName("a");
				
//				alert(nodes.length);
//				alert(nodes[0].innerHTML);
				for(var x=0; x<nodes.length; x++){
					
//					alert(nodes[x].innerHTML);
					nodes[x].target = "_blank";
				}
			}
			
			
			/*
			 * 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。
			 * 当然是要获取其中被操作的超链接对象啊。
			 * 可是通过document获取超链接，拿到的是页面中所有的超链接节点。
			 * 只想获取一部分该如何办呢？
			 * 只要获取到被操作的超链接所属的节点即可。 
			 * 
			 * 在通过这个节点获取到它里面所有的超链接节点。
			 * 
			 */
			function getNodeDemo4(){
				
				//获取超链接所属的div节点
				var divNode = document.getElementById("newslink");
				
				//通过对div对象方法的查找发现它也具备getElementsByTagName方法。
				//记住：所有的容器型标签都具备这个方法。在该标签范围内获取指定名称的标签。
				var aNodes = divNode.getElementsByTagName("a");
				for(var x=0;x<aNodes.length; x++){
//					alert(aNodes[x].innerHTML);
					aNodes[x].target = "_blank";
				}
				
			}
		</script>
		
		<input type="button" value="演示document对象获取节点" οnclick="getNodeDemo4()" />
		<div id="divid">这是一个div区域</div>
		<input type="text" name="user"  />
		<a href="http://www.sina.com.cn">新浪网站11</a>
		<a href="http://www.SOHU.com.cn">新浪网站22</a>
		<div id="newslink">
		<a href="http://www.163.com.cn">新闻链接1</a>
		<a href="http://www.164.com.cn">新闻链接2</a>
		<a href="http://www.itcast.com.cn">新闻链接3</a>
		</div>
	</body>
</html>

如果想实现新浪网的连接都在本页跳转，而新闻连接都在心网页打开，就必须将那个新闻的网页连接的标签全部归为一类，用div标签将他们封装到一起，这样可以通过拿到div标签来得到全部的新闻的标签，通过遍历就指定tagart就可以实现上述要求。

15、通过节点见得层次关系获得节点。
兄弟节点尽量少用，不同游览器解析不一致，容易出现混乱。

span标签是行内标签，后面没有换行的。所以在不同浏览器解析兄弟节点时，后面的空白会出现问题。想要避免出现问题最好就是把这些兄弟标签紧紧一个接着一个。但是最好还是少用兄弟节点，这样的错误就会少点。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<!--
		通过节点的层次关系获取节点对象。
		
		关系：
		1，父节点: parentNode:对应一个节点对象。
		2，子节点：childNodes:对应一个节点集合。
		3，兄弟节点：
			上一个兄弟节点：previousSibling
			下一个兄弟节点：nextSibling
		-->
		
		<script type="text/javascript">
			function getNodeByLevel(){
				//获取页面中的表格节点。 
				var tabNode = document.getElementById("tabid");
				
				//获取父节点。parentNode
//				var node = tabNode.parentNode;
//				alert(node.nodeName);//body

				//获取子节点。childNodes
//				var nodes = tabNode.childNodes;
//				alert(nodes[0].childNodes[0].nodeName);

				//获取兄弟节点。
				//上一个。
//				var node = tabNode.previousSibling;
//				alert(node.nodeName);
				
//				var node = tabNode.nextSibling.nextSibling;
//				alert(node.nodeName);
				
				
//				尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
//				会解析出标签间的空白文本节点
			}
		</script>
		
		<input type="button" value="通过节点层次关系获取节点" οnclick="getNodeByLevel()" />
		
		<div>div区域</div>
		<span>span区域</span>
		<table id="tabid">
			<tr>
				<td>单元格一</td>
				<td>单元格二</td>
			</tr>
		</table>
		<span>span区域11</span>
		<dl>
			<dt>上层项目</dt>
			<dd>下层项目</dd>
		</dl>
		<a href=''>一个超链接</a>
	</body>
</html>

16、创建并添加节点

下图是创建文本节点并添加的一种方式：

下面是创建按钮标签：

		
			<script type="text/javascript">
				//创建并添加节点。
				//需求：在div_1节点中添加一个文本节点。 
				function crtAndAdd(){
					
					/*
					 * 1，创建一个文本节点。
					 * 2，获取div_1节点。
					 * 3，将文本节点添加到div_1节点中。
					 */
					
					//1, 创建节点。使用document中的createTextNode方法。 
					var oTextNode = document.createTextNode("这是一个新的文本 ");
					
					//2，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
					//3，将文本节点添加到div_1节点中。
					oDivNode.appendChild(oTextNode);
				
				}
				
				
				//需求：在div_1中创建并添加一个按钮节点。
				function crtAndAdd2(){
					//1,创建一个按钮节点。
					var oButNode = document.createElement("input");
					oButNode.type = "button";
					oButNode.value = "一个新按钮";
					
					
					//2，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
					
					 //3，将按钮节点添加到div_1节点中。
					oDivNode.appendChild(oButNode);
				}
				
				//通过另一种方式完成添加节点。
				function crtAndAdd3(){
					
					/*
					 * 其实是使用了容器型标签中的一个属性。innerHTML.
					 * 这个属性可以设置html文本。
					 */
					
					//1，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
//					oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";
					oDivNode.innerHTML = "<a href='http://www.163.com'>有个超链接</a>";
					
				}

18、节点操作-删除节点

首先获得div节点

var oDivNode = document.getElementById("div_2");

oDivNode.removeNode(false);使用div节点的remvoeNode方法删除。默认是false，但是只删掉div的儿子节点，孙子节点自动向上升一级额，变成新的div儿子节点。

oDivNode.removeNode(true)///则是删除div下面全部的子节点（包括孙子节点等）。这种方法使用的少

一般使用removeChild方法。删除子节点。
相当于自己没办法删掉自己，就先找到父节点，让父节点来删掉他的子节点，也就是删掉自己。获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。

//				=======================
				//需求将div_2节点删除。 
				function delNode(){
					
					//1,获取div_2节点。
					var oDivNode = document.getElementById("div_2");
					
					//2,使用div节点的remvoeNode方法删除。
//					oDivNode.removeNode(true);较少用。 

					//一般使用removeChild方法。 删除子节点。
					//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
					oDivNode.parentNode.removeChild(oDivNode);
					

					
				}
				
				//需求：用div_3节点替换div_1节点。

19、节点的操作-替换&克隆节点

DOM中的节点替换就是把被替换那个删去，将替换的移到被替换的地方。也就是说，节点的个数少了1。

想要用3节点替换掉1节点，但是仍保留3节点在原来的位置（也就是还是那么多的节点，并不少1）。可以先把3节点克隆一下，再拿这个克隆的去替换节点1。

				//需求：希望用div_3替换div-1，并保留div-3节点。
				//其实就是对div_3进行克隆
				
				function cloneDemo(){
					var oDivNode_1 = document.getElementById("div_1");
					var oDivNode_3 = document.getElementById("div_3");
					var oCopyDiv_3 = oDivNode_3.cloneNode(true);
					
//					oDivNode_1.replaceNode(oDivNode_3);
					// 建议使用replaceChild方法。
					
					oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
				}
//				firstNode = childNodes[0];
//				lastNode = childNodes[childeNodes.length-1];
			</script>

完整的生成，删除，替换节点的程序如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
		<style type="text/css">
			div{
				border:#00ccff 1px solid;
				width:200px;
				padding:30px;
				margin:10px;
			}
			#div_1{
				background-color:#00ccff;
			}
			#div_2{
				background-color:#FFccff;
			}
			#div_3{
				background-color:#cc00ff;
			}
			#div_4{
				background-color:#00FF00;
			}
		</style>
	</head>
	<body>
		
		
			<script type="text/javascript">
				//创建并添加节点。
				//需求：在div_1节点中添加一个文本节点。 
				function crtAndAdd(){
					
					/*
					 * 1，创建一个文本节点。
					 * 2，获取div_1节点。
					 * 3，将文本节点添加到div_1节点中。
					 */
					
					//1, 创建节点。使用document中的createTextNode方法。 
					var oTextNode = document.createTextNode("这是一个新的文本 ");
					
					//2，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
					//3，将文本节点添加到div_1节点中。
					oDivNode.appendChild(oTextNode);
				
				}
				
				
				//需求：在div_1中创建并添加一个按钮节点。
				function crtAndAdd2(){
					//1,创建一个按钮节点。
					var oButNode = document.createElement("input");
					oButNode.type = "button";
					oButNode.value = "一个新按钮";
					
					
					//2，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
					
					 //3，将按钮节点添加到div_1节点中。
					oDivNode.appendChild(oButNode);
				}
				
				//通过另一种方式完成添加节点。
				function crtAndAdd3(){
					
					/*
					 * 其实是使用了容器型标签中的一个属性。innerHTML.
					 * 这个属性可以设置html文本。
					 */
					
					//1，获取div_1节点。
					var oDivNode = document.getElementById("div_1");
					
//					oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";
					oDivNode.innerHTML = "<a href='http://www.163.com'>有个超链接</a>";
					
				}
				
//				=======================
				//需求将div_2节点删除。 
				function delNode(){
					
					//1,获取div_2节点。
					var oDivNode = document.getElementById("div_2");
					
					//2,使用div节点的remvoeNode方法删除。
//					oDivNode.removeNode(true);较少用。 

					//一般使用removeChild方法。 删除子节点。
					//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
					oDivNode.parentNode.removeChild(oDivNode);
					

					
				}
				
				//需求：用div_3节点替换div_1节点。
				
				function updateNode(){
					
					/*
					 * 获取div-3和div-1.
					 * 使用replaceNode进行替换。
					 */
					var oDivNode_1 = document.getElementById("div_1");
					var oDivNode_3 = document.getElementById("div_3");
					
//					oDivNode_1.replaceNode(oDivNode_3);
					// 建议使用replaceChild方法。
					
					oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
					
					
				}
				
				
				
				//需求：希望用div_3替换div-1，并保留div-3节点。
				//其实就是对div_3进行克隆
				
				function cloneDemo(){
					var oDivNode_1 = document.getElementById("div_1");
					var oDivNode_3 = document.getElementById("div_3");
					var oCopyDiv_3 = oDivNode_3.cloneNode(true);
					
//					oDivNode_1.replaceNode(oDivNode_3);
					// 建议使用replaceChild方法。
					
					oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
				}
//				firstNode = childNodes[0];
//				lastNode = childNodes[childeNodes.length-1];
			</script>
			<input type="button" value="创建并添加节点" οnclick="crtAndAdd3()"/>
			<input type="button" value="删除节点" οnclick="delNode()"/>
			<input type="button" value="修改节点" οnclick="updateNode()"/>
			<input type="button" value="克隆节点" οnclick="cloneDemo()"/>
		<hr/>
		
		<div id="div_1">
			
		</div>
		
		<div id="div_2">
			好好学习，day day up！
		</div>
		
		<div id="div_3">
			div区域演示文字
		</div>
		
		<div id="div_4">
			节点的增删改查
		</div>
		
	</body>
</html>