DOM笔记一

其他 2018-11-16 17:56:11 阅读次数: 0

DOM:Document Object Model(文档文本对象)
        用来将标记型文本封装成对象，并将标记型文本中的所有内容（标签，文本，属性等）都封装成对象。
        封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容。
        因为对象的出现可以有属性和行为被调用。
    文档对象模型：
    文档：标记型文档。
    对象：封装了属性和行为的实例，可以被直接调用。
    模型：所有标记型文档都具备一些共性特征的一个体现。
            标记型文档（标签，属性，标签中封装的数据）。
    只要是标记型文档，DOM这种技术就可以对其进行操作。
    常见的标记型文档：xml，html
    
    DOM这种技术是如何对标记型文档操作的呢？
    要操作标记型文档必须对其进行解析
    DOM的解析方式：将标记型文档解析一刻DOM树，并将中的内容封成节点对象。


    
    note：这个解析方式的好处是可以对树中的节点任意操作，比如：增删改查。    
    弊端：这种解析方式要将整个标记型文档加载进内存。意味着如果标记型文档的体积很大，较为浪费内存空间。
    
    简介另外一种解析方式：SAX：是由组织定义的一种民间常用的解析方式，并不是W3C标准，而DOM是W3C的标准。
    SAX解析的方式：基于事件驱动的解析，获取数据的速度很快，但不能对标记进行增删改查。    
    
    DOM模型有三种：
    DOM level 1：将html文档封装成对象；
    DOM level 2：在level 1 的基础上加入了新功能，比如解析名称空间。
    DOM level 3：将XML文档封装成了对象。    

<html xmln="http://www.sin.com">
	<table></table>
	</html>
	<html xmln="http://www.huyou.com">
	<table></table>
	</html>

    DHTML：动态的HTML。不是一门语言：是多项技术综合体的简称。
    其中包含了HTML，CSS，DOM，Javascript。
    这四个技术在动态html页面效果定义时，都处于什么样的角色？负责什么样的职责呢？
    
    HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
        简单说：用标签封装数据。
    CSS：负责提供样式属性，对标签中的数据进行样式的定义。
        简单说：对数据进行样式定义。
    DOM：负责标签型文档以及文档中所有内容进行解析，并封装成对象，在对象的定义了更多的属性和行为，便于对对象操作。
        简单说：将文档和标签以及其他内容变成对象。
    JS：     负责提供程序设计语言，对页面中的对象进行逻辑操作。
            简单说：负责页面的行为。就是页面的动态效果。
    所以js是动态效果的主力编程语言。
    
    DHTML+XMLhttpRequest=AJAX

BOM：Browser Object Model浏览器对象模型。
        这个模型方便于操作浏览器。     
    浏览器对应的对象是window对象。在DHTML API里面。   
    为了演示方便，定义了一个事件源。通过对事件源的触发，获取想要的结果。
    比如让用户通过点击按钮就可以知道浏览器的一些信息。
    定义按钮onclick事件的处理方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
	BOM：Browser Object Model浏览器对象模型。
		这个模型方便于操作浏览器。
		
	浏览器对应的对象是window对象。在DHTML API里面。	
	 -->
	<!-- 
	为了演示方便，定义了一个事件源。通过对事件源的触发，获取想要的结果。
	比如让用户通过点击按钮就可以知道浏览器的一些信息。
	 -->
	<!-- 
	定义按钮onclick事件的处理方式。
	 -->
	 <script type="text/javascript" src="out.js"></script>
	<script type="text/javascript">
	function windowdemo1(){
		var name=navigator.appName;
		var version=navigator.appVersion;
		println(name+":"+version);
	}

	function windowdemo2(){
		var p=location.protocol;
		var t=location.href;
		//给href属性设置了一个值，改变了地址栏的值，并对其进行了解析，如果是http，还对其进行访问。
		location.href="http://www.sina.com";
	}
	
	
	</script>
	<input type="button" value="演示window中的对象1" onclick="windowdemo1()"> 
	<input type="button" value="演示window中的对象2" onclick="windowdemo2()"> 
	
	
</body>
</html>

window常用方法演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- window常用方法演示 -->
	<script type="text/javascript">
	var timeid;
	function windowMethod(){
	//	var b=confirm("你确定吗？");
	//	alert("b="+b);
	//	setTimeout('alert("time out run")',4000);
		timeid=setInterval("alert('time interval')",3000);
	}
	function timestop(){
		clearInterval(timeid);
	}
	function windowmove(){
		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=200,width=400,status=no,toolbar=no,menubar=no,location=no");
	}
	</script>
	
	
	<input type="button" value="window常用方法演示"  onclick="windowopen()">
	<input type="button" value="停止"  onclick="timestop()">
</body>
</html>

window中的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- window中的事件 -->
	<script type="text/javascript">
	onload=function(){
		window.status="啊啊啊啊啊";
	}
	
	/*
	onload=function(){
		alert("onload run");
	}
	onunload=function(){
		alert("onunload run");
	}
	onbeforeload=function(){
		alert("onbeforeload run");
	}
	*/
	
	</script>
	
</body>
</html>

广告练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 广告练习 -->
	<script type="text/javascript">
	onload=function(){
		open("ad.html","_blank",
		"height=200,width=400,status=no,toolbar=no,menubar=no,location=no");		
	}

	</script>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<h1>广告</h1>
	<h2>清扬，无懈可击</h2>
	<h3>清扬，无懈可击</h3>
	<h4>清扬，无懈可击</h4>
	<script type="text/javascript">
//	setTimeout("close()",3000);
	onunload=function(){
		open("ad.html","_blank",
		"height=200,width=400,status=no,toolbar=no,menubar=no,location=no");		
	}
	setInterval("focus()",1000);
	</script>
	
	
</body>
</html>

document对象的演示：

该对象将标记型文本进行封装。
    该对象的作用，是可以对标记型文本进行操作。
    最常见的操作就是，想要实现动态效果，需要对节点进行操作，那么先要获取到这个节点。
    要想获取这个节点，就必须首先获取到节点所属对象document。
    
    所以document对象最常见的操作是获取页面中的节点。
    获取节点的方法体现：
    1、getElementById():通过标签中的id属性获取节点的对象；
    2、getElementsByName():用过标签中的name属性获取节点对象，因为name有相同，所以返回的是一个数组。
    3、getElementsByTagName():
    
    带s的返回的都是数组。

     需求：获取页面中的div节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!--
	 document对象的演示
	
	该对象将标记型文本进行封装。
	该对象的作用，是可以对标记型文本进行操作。
	最常见的操作就是，想要实现动态效果，需要对节点进行操作，那么先要获取到这个节点。
	要想获取这个节点，就必须首先获取到节点所属对象document。
	
	所以document对象最常见的操作是获取页面中的节点。
	获取节点的方法体现：
	1、getElementById():通过标签中的id属性获取节点的对象；
	2、getElementsByName():用过标签中的name属性获取节点对象，因为name有相同，所以返回的是一个数组。
	3、getElementsByTagName():
	
	带s的返回的都是数组。
	 -->
	<script type="text/javascript" src="out.js"></script>
	<script type="text/javascript">
	
	function getNodeDemo1(){
		/*
		需求：获取页面中的div节点。
		思路：通过document对象来完成。因为div有id属性，所以可以通过id属性来完成获取。		
		*/
		var divNode=document.getElementById("divid");
		//节点有三个必备的属性。节点名称，节点类型，节点值。
	//	println(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
		/*
		
		常见的节点有三种：
		1、标签型节点：类型1
		2、属性节点：类型2
		3、文本节点：类型3
		标签型节点是没有值，属性和文本节点是可以有值得。
		
		*/
		
		//获取div区域的文本
		var text=divNode.innerHTML;
		//println(text);
		divNode.innerHTML="我把div改掉了".fontcolor("red");
	}
	
	//获取文本框节点对象，演示getElementsByName()方法。
	function getNodeDemo2(){
		//通过name属性获取节点的对象
		var inputNodes=document.getElementsByName("inputname")[0];
		println(inputNode.value);
	}
	
	//获取超链接节点对象，演示getElementsByTagName()方法。
	function getNodeDemo3(){
		
		var anodes=document.getElementsByTagName("a");
		for(var x=0;x<anodes.length;x++){
			anodes[x].target="_blank";
			//println(anodes[x].innerHTML);
			} 
	}
	
	//获取div区域里面的超链接a对象。
	/*
	通过document获取的超链接节点是页面中的所有节点
	但是要拿到部分节点，只要活得要操作的节点的所属节点就可以了。
		
	通过这个节点获取里面的所有超链接节点。
	*/
	function getNodeDemo4(){
		var divnode=document.getElementById("divad");
		//div对象也具备这个getElementsByTagName（）方法。
		//所有的容器标签都具备这个方法，在标签范围内获取指定的标签。
		var anodes=divnode.getElementsByTagName("a");
		for(var x=0;x<anodes.length;x++){
		//	println(anodes[x].innerHTML);
			anodes[x].target="_blank";
		} 
	}
	
	
	</script>
	
	<input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()" />
	<div id="divid">这是一个div区域</div>
	<input type="text" name="inputname" />
	<a href="http://www.sina.com">新浪</a>
	<a href="http://www.baidu.com">百度</a>
	
	<div id="divad">
	<a href="http://www.sina.com">新闻1</a>
	<a href="http://www.sina.com">新闻2</a>
	<a href="http://www.sina.com">新闻3</a>
	</div>
	
</body>
</html>

通过节点的层次关系获取节点对象。

关系：
1、父节点：parentNode：对应一个节点。
2、子节点：childNodes：对应一个节点集合。
3、兄弟节点：
    上一个兄弟节点：previousSibling
    下一个兄弟节点：nextSibling

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
通过节点的层次关系获取节点对象。

关系：
1、父节点：parentNode：对应一个节点。
2、子节点：childNodes：对应一个节点集合。
3、兄弟节点：
	上一个兄弟节点：previousSibling
	下一个兄弟节点：nextSibling
	
 -->
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">

function getNodedemo(){
	//println("hahah");
	//获取表格对象
	var tablenode=document.getElementById("tableid");
	
	//获取父节点
	var fnode=tablenode.parentNode;
	//println(fnode.nodeName);
	
	//获取子节点
	var snodes=tablenode.childNodes;
	//println(snodes[0].nodeName);
	
	//获取上一个兄弟节点
	var pnode=tablenode.previousSibling;
	println(pnode.nodeName);
	
	//获取下一个兄弟节点
	var nnode=tablenode.previousSibling;
	println(nnode.nodeName);
	
	//尽量少用兄弟节点，会出现浏览器解析不一致的情况。

}

</script>

<input type="button" value="按层次关系获取节点对象" onclick="getNodedemo()"/>
<table id="tableid">
	<tr>
		<th>单元格一</th>
		<td>单元格二</td>
	</tr>
</table>
<dl>
	<dt>上层项目</dt>
	<dt>下层项目</dt>
</dl>
<a href="">一个超链接</a>

</body>
</html>

创建并添加节点

删除节点

修改节点

克隆节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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: #ffcc00;
		}
		#div_4{
			background-color: #aaff00;
		}
	</style>
	<script type="text/javascript">
	
	//创建并添加节点
	//在div_1中添加一个文本节点
	function creatNode(){
		/*
		1、创建一个文本节点；
		2、获取div_1的节点；
		3、把节点文本节点添加到div_1上。
		*/
		//1、创建一个文本节点使用document的createTextNode()方法;
		var oTextNode=document.createTextNode("这是我刚创建的一个文本");
		//2、获取div_1的节点
		var odiv_1Node=document.getElementById("div_1");
		//3、把节点文本节点添加到div_1上使用div对象的appendChild()方法。
		odiv_1Node.appendChild(oTextNode);	
	}
	
	//在div_1创建并添加一个按钮节点(方式1)
	function creatButton1(){
		/*
		1、创建一个按钮节点；
		2.获取div_1的节点；
		3.把按钮节点添加到div_1。
		*/
		//1、通过document的createElement()方法创建一个按钮节点对象
		oButten = document.createElement("input");
		oButten.type="button";
		oButten.value="新创建的按钮";
		//2、获取div_1的节点
		var odiv_1Node=document.getElementById("div_1");
		//3、把节点按钮节点添加到div_1上使用div对象的appendChild()方法。
		odiv_1Node.appendChild(oButten);	
	}
	
	//在div_1创建并添加一个按钮节点(方式2)
	function creatButton_2(){
		//1、获取div_1的节点
		var odiv_1Node=document.getElementById("div_1");	
		odiv_1Node.innerHTML="<input type='button' value='又有个新按钮'/>";
		//odiv_1Node.innerHTML="<a href='http://www.sina.com'>超链接</a>";	
	}
	
	//删除一个节点
	//删除div2节点
	function deleteNode(){
		//1、获取div_2节点
		var oDiv_2Node=document.getElementById("div_2");
		
		//2、使用div节点的removeNode()方法
//		oDiv_2Node.removeNode(true);//false只删除自己，true连同子节点一起删除。较少用
		
		//3、一般使用节点中的removeChild()方法
		oDiv_2Node.parentNode.removeChild(oDiv_2Node);
	}
	
	//修改节点
	//用div_3替换div_1节点
	function updateNode(){
		//获取div_1节点和div_2节点
		var oDiv_1Node=document.getElementById("div_1");
		var oDiv_3Node=document.getElementById("div_3");
		
		//使用replaceNode()方法替换,较少用
	//	oDiv_1Node.replaceNode(oDiv_3Node);
		
		//一般使用replaceChild()方法
		oDiv_1Node.parentNode.replaceChild(oDiv_3Node,oDiv_1Node);
		
	}
	
	//克隆节点
	//用div_3替换div_1节点，并且保持div_3不变
	function cloNode(){
		//获取div_1节点和div_2节点
		var oDiv_1Node=document.getElementById("div_1");
		var oDiv_3Node=document.getElementById("div_3");
		//克隆div_3
		var copynode3=oDiv_3Node.cloneNode(true);//false只克隆本节点，true连同子节点一起克隆
		//使用克隆的节点替换div_1节点
		oDiv_1Node.parentNode.replaceChild(copynode3,oDiv_1Node);
		
	}
	</script>

</head>

<body>
	<input type="button" value="创建并添加节点" onclick="creatButton_2()"/>
	<input type="button" value="删除节点" onclick="deleteNode()"/>
	<input type="button" value="修改节点" onclick="updateNode()"/>
	<input type="button" value="克隆节点" onclick="cloNode()"/>
	<hr/>

	<div id="div_1">
	
	</div>
	<div id="div_2">
		每天睡觉美滋滋
	</div>
	<div id="div_3">
		div区域演示文字
	</div>
	<div id="div_4">
		节点的增删改查
	</div>


</body>
</html>

猜你喜欢

转载自blog.csdn.net/TDOA1024/article/details/83383147
今日推荐
周排行
Access的四舍五入取整
8.23 前端学习过程
入门学习过程方向与漏洞复现总结：
操作分布式文件之八：如何批量并行读写远程文件和事务补偿处理
应邀出个教程 （搭建tensorflow跑网络环境）
Kubernetes之Pod控制器应用进阶
14-[mysql内置功能]--
HDU6212 区间dp 好题
VS2015生成代码图
验证手机号的工具类
每日归档
更多
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)
2024-10-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022