JavaSe基础XX26——DOM_1

于 2014-09-22 01:39:54 发布
阅读量587 收藏
点赞数
分类专栏： JavaSE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovewaterman/article/details/39464113
版权

*01-DOM(概述)


DOM:Document Object Model(文档对象模型)
用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。
封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。
因为对象的出现就可以有属性和行为被调用。
文档对象模型
文档：标记型文档。
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。
标记型文档(标签，属性，标签中封装的数据).

只要是标记型文档，DOM这种技术都可以对其进行操作。

常见的标记型文档：html  xml

DOM这种技术是如何对标记型文档机型操作的呢？
要操作标记型文档必须对其进行解析。

DOM技术的解析方式：将标记型文档解析一棵DOM树，并将树中的内容都封装成节点对象。


页面的动态变化也是依靠DOM技术的。




*02-DOM(DOM解析的特点)




*03-DOM(DOM三级模型)


*04-DOM(DHTML概述)





*05-DOM(BOM&Navigator对象&History对象)

浏览器本身也可以具备动态效果。

BOM：browser object model

浏览器对应的对象就是windows对象。






js如果处理的事件多就放在head里面，少的话，可以定义在body里面。







*06-DOM(Location对象)

地址栏：http:\\




和java中的url相似

location属性既可以获取也可以设置。




*07-DOM(window常见方法_1)

















*08-DOM(window常见方法_2)


close&open、








过几秒自动关闭广告。





新开的窗口可以自动关闭。

关闭原始窗口会弹出提示对话框。

<!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>
		<!--
		演示window中的常见方法。
		-->
		
		<script type="text/javascript" src="out.js"></script>
		<script type="text/javascript">
			
			var timeid;
			function windowMethodDemo(){
				
//				var b = confirm("你真的确定要点击吗？");
//				alert("b="+b);

//				setTimeout("alert('time out run')",4000);
				timeid = setInterval("alert('interval run')",3000);
			}
			
			function stopTime(){
				clearInterval(timeid);
			}
			
			
			function windowMove(){
			
				//	moveBy(10,10);
				//	moveTo(40,40);
				for (var x = 0; x < 700; x++){
					moveBy(20, 0);
					moveBy(0, 20);
					moveBy(-20,0);
					moveBy(0,-20);
				} 
			}
			
			function windowOpen(){
				
//				open("ad.html","_blank","height=400,width=400,status=no,toolbar=no,menubar=no,location=no");
//				c8lose();
			}
		</script>
		
		
		<input type="button" value="演示window对象的方法" οnclick="windowOpen()"/>
		<input type="button" value="停止" οnclick="stopTime()"/>
	</body>
</html>


*09-DOM(window常见事件)





常见事件：














onload = function(){windows.status = "ssss"};






*10-DOM(练习-广告弹窗)



*11-DOM(document获取节点byId)






<!--
document对象的演示。

该对象将标记型文档进行封装。
该对象的作用，是对可以标记型文档进行操作。
最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。
要想获取节点，必须要先获取到节点所属的文档对象document。

所以document对象最常见的操作就是获取页面中的节点。 

获取节点的方法体现：
1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。
2，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
3，getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。

凡是带s返回的都是数组。
-->













1:表示标签型节点

null:表示这个节点是封装数据的，本身没有值。

文本节点有值。







*12-DOM(document获取节点byName)


--，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。





文本标签里面的name和value属性。其中value可以不写。




*13-DOM(document获取节点byTagName)

---getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。








新窗口打开的属性：TAGET属性。





*14-DOM(document获取节点byTagName_2)


/*
			 * 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。
			 * 当然是要获取其中被操作的超链接对象啊。
			 * 可是通过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>




*15-DOM(通过节点层次关系获取节点)

获取节点的另一种方式，


表格体 默认是tboy，不写也有的。

火狐和IE内核不一样。DOM解析也不一样。

火狐会认为在Table后面如果加了一个回车，就会认为是一个文本，



<!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-DOM(节点操作-创建并添加_1)














 

*17-DOM(节点操作-创建并添加_2)

想要创建添加一个按钮（标签）、







==========



//通过另一种方式完成添加节点。







*18-DOM(节点操作-删除节点)











removeNode(true)；



*19-DOM(节点操作-替换&克隆节点)




3节点替换1节点











需求，3不动


方法：cloneNode







--------------小结-----------------------



<!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>



DOM文档模型2010版

lovewaterman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document对象+获取节点三种方法演示：
xdd_lmd的博客
07-30 6380
document对象的演示。 该对象将标记型文档进行封装。 该对象的作用，是可以对标记型文档进行操作。 最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。 要想获取节点，必须要先获取到节点所属的文档对象document。 所以document对象最常见的操作就是获取页面中的节点。 获取节点的方法体现： 1，getElementById:通过标签的id属性值获取
JavaSe基础XX18——IO流_1
雨一直下
09-01 7249
null
JavaSE基础篇 -- IO流的详细操作
07-28
本资源内详尽描述了Java基础的IO操作，包括基本的文件读取、写入、复制、分割、合并等动作，详情另可参见我的博客http://blog.csdn.net/zhongkelee/article/details/47061013
JavaSe基础XX18——IO流_4
雨一直下
09-09 1352
*31-IO流(File对象-构造函数&字段)
JavaSe基础XX18——IO流_7
雨一直下
09-10 1082
null
01_JavaSE零基础
07-22
资源名称：01_JavaSE零基础资源目录：000_动力节点_Java零基础_讲义000_动力节点_Java零基础_课堂笔记001_动力节点_Java零基础_安装EditPlus002_动力节点_Java零基础_计算机概述003_动力节点_Java零基础_Java软件...
Studentmanger.zip_javase基础
最新发布
09-23
JavaSE（标准版）是Java开发的基础平台，主要用于桌面应用和服务器端开发。在这个"StudentManager.zip_javase基础"项目中，我们可以看到一个简单的学生管理系统，它是一个适合初学者练习编程技能的实例。这个系统...
018-IDEA-javase代码_javase知识学习_javaSEppt_
10-02
JavaSE是java分类中的标准版，是刚接触java要学习的基础知识。JavaEE是java分类中的企业版，是java中的高级，涉及到的知识广泛。JavaME中M是Micro的缩写，用在嵌入式等电子设备中。
JavaSE_java基础_
10-01
在JavaSE中，"基础"涵盖了许多关键概念，包括但不限于： 1. **环境配置**：首先，学习Java需要安装Java Development Kit (JDK)，并配置好环境变量，如`JAVA_HOME`、`PATH`和`CLASSPATH`，以便系统能够找到Java...
1.JavaSE基础学习笔记
06-11
### JavaSE基础学习笔记 #### 一、Java概述与历史 - **起源与发展**：Java最初由Sun Microsystems在1995年推出，后被Oracle公司收购并继续发展。Java经历了多个版本的发展，逐渐形成了Java SE（Standard Edition，...
JavaSe基础XX18——IO流_6
雨一直下
09-10 3306
*48-IO流(打印流-PrintStream)
JavaSe基础XX18——IO流_2_字符流缓冲区
雨一直下
09-04 9645
*11-IO流(字符流-缓冲区-解释) //创建一个临时容器，用于缓存读取到的字符。 char[] buf = new char[BUFFER_SIZE];//这就是缓冲区。  Java就把这个
JavaSe基础XX18——IO流_5
雨一直下
09-10 7538
*42-IO流(Properties集合的-基本功能) *43-IO流(Properties集合的-list方法) *44-IO流(Properties集合的-store方法) *45-IO流(Properties集合的-修改配置信息) *46-IO流(Properties集合的-练习)
JavaSe基础XX18——IO流_3
雨一直下
09-05 6540
*21-IO流(字节流-操作文件基本演示) *22-IO流(字节流-练习-复制MP3)
JavaSe基础XX22——正则表达式
雨一直下
09-17 1250
*01-正则表达式(概述) * * * * * * * * *
JavaSe基础XX16——API对象-StringBuffer类
雨一直下
08-28 1193
null
JavaSe基础XX16——Eclipse使用
雨一直下
08-27 1099
以后的是--->毕向东2013
JavaSe基础XX24——CSS
雨一直下
09-18 961
* * * * * * * * * * * * * * *
JavaSe基础02——Hello World
雨一直下
07-23 888
开发程序的三步骤 1.编辑
JavaSe基础XX23——HTML
雨一直下
09-17 863
*01-HTML(概述&演示) * * * * * *
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值