JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程

1、文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器。

   DOM解析器就是完成结构化文档和DOM树之间的转换关系。
   DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树
  从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档
2、DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的“内容”,即返回的某个元素的开始标签、结束标签之间的字符串内容(不包含其它子元素),表单控件的标签之间的内容是它的值,因此只能用value来访问。
3、利用结点关系访问HTML元素
  <html>
	<head>
		<title>MyHtml.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
		.select{
			background-color:#66f;
		
		}
		</style>
	</head>
	<body>
	<ol id="books">
		<li id="java">疯狂Java讲义</li>
		<li id="ssh">经典JavaEE企业级应用</li>
		<li id="ajax" class="select">疯狂Ajax讲义</li>
		<li id="xml">疯狂XML讲义</li>
		<li id="hadoop">疯狂Hadoop讲义</li>
		<li id="mahout">疯狂mahout讲义</li>
	</ol>
	<input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
	<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
	<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
	<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
	<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
	<input type="button" value="curTarget" onclick="change(curTarget);"/>
		<script type="text/javascript">
		var curTarget=document.getElementById("ajax");
		var change=function(target){
		alert(target.innerHTML);
		};
		</script>
	</body>
</html>

//在非IE浏览器中,页面中的换行和空白都被当成结点,建议用chrome浏览器运行上面的代码


4、表单在DOM中由HTMLFormElement对象表示,HTMLFormElement的elements属性值是一个HTMLCollection对象,既可以当成普通数组用数字索引访问元素,也可以通过关联数组来访问(即通过字符串索引来访问,该字符串为表单里的name或id属性值)
例程:
	<form id="d" action="" method="get">
	<input type="text" name="user" /><br/>
	<input type="password" name="pass" /><br/>
	<select name="color">
	<option value="red" >红色</option>
	<option value="blue" >蓝色</option>
	</select>
	<input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);">
	<input type="button" value="第二个" onclick="alert(document.getElementById('d').elements['pass'].value);">
	<input type="button" value="第三个" onclick="alert(document.getElementById('d').color.value);">
5、HTMLSelectElement代表一个列表框或下拉菜单,此对象也支持一些额外的属性
6、演示一个可编辑表格的例子
 <html>
	<head>
		<title>js练习</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
			#d1{
			border:1px solid black;
			}
		</style>
	</head>
	<body>
	改变第<input type="text" size="2" id="row"/>行,第<input type="text" size="2" id="col"/>列的值为:<input type="text" size="20" id="rep"/><br/>
	<button onclick="change();">改变</button><br/>
	<table id="d1" border="1" cellspacing="0" >
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>鸟鹏</td>
		<td>26</td>
	</tr>
	<tr>
		<td>周鹏程</td>
		<td>24</td>
	</tr>
	<tr>
		<td>顾慧建</td>
		<td>24</td>
	</tr>
	</table>
	
	<script type="text/javascript">
	var change=function(){
	var t=document.getElementById("d1");
	var row=document.getElementById("row").value;
	var col=document.getElementById("col").value;
	var repContent=document.getElementById("rep").value;
	row=parseInt(row);
	col=parseInt(col);
	//alert(row+":"+col);
	if(isNaN(row)||isNaN(col)){
	alert("您要修改的行或列一定要是整数!");
	return false;
	}

	if(row>t.rows.length||col>t.rows.item(0).cells.length)
	{
	alert("要修改的单元格超出范围!");
	return false;
	}
	//修改单元格的值
	//t.rows.item(row-1).cells.item(col-1).innerHTML=repContent;
	t.rows[row-1].cells[col-1].innerHTML=repContent;
	}
	</script>
	</body>
</html>
7、演示一个增加HTML元素的例子(通过document.createElement()方法)
   例程1:
<body>
	<ul id="d">
	<li>我是要被复制的内容</li>
	</ul>
	<script type="text/javascript">
	var ul=document.getElementById("d");
	var n=ul.firstChild.nextSibling.cloneNode(false);//通过拷贝结点的方式,这比创建结点节约
	//修改被复制的结点
	n.innerHTML="新结点的内容";
	ul.appendChild(n);//一个结点创建出来一定要将该节点添加到DOM中才行
	</script>
	</body>
	//以上代码在IE中有错误,IE不把空白、换行作为Node

   例程2:
	<body id="body">
	<script type="text/javascript">
	var sel=document.createElement("select");
	for(var i=0;i<10;i++){
		//创建一个<option>元素
		var op=new Option("新增的选项"+i,i);
		sel.options[i]=op;
	}
	sel.size=6;
	document.getElementById("body").appendChild(sel);
	</script>
	</body>
	//以上代码IE、非IE通用

8、表格对象的表格元素、表格行有自己的添加子元素的方法,具体查看HTMLTableElement对象的方法
9、删除HTML元素也是通过删除节点也是通过删除节点来完成的。对于普通的HTML元素,可以用通用的方法来删除节点,而列表框、下拉菜单、表格则有额外的方法删HTML元素。删除节点的例程:
<body id="body">
	<input id="add" type="button" value="增加" disabled onclick="add()"/>
	<input id="del" type="button" value="删除"  onclick="del()"/>
	<div id="target" style="width:240px;height:50px;border:1px solid black">被控制的目标元素 </div>
	<script type="text/javascript">
	var body=document.getElementById("body");
	var target=document.getElementById("target");
	var add=function(){
	body.appendChild(target);
	document.getElementById("add").disabled="disabled";
	document.getElementById("del").disabled="";
	}


	var del=function(){
	body.removeChild(target);
	document.getElementById("del").disabled="disabled";
	document.getElementById("add").disabled="";
	}
	</script>
	</body>

10、删除(增加)列表框、下拉菜单的选项
<body id="body">
	<input id="con" type="text"  size="20"/>
	<input id="add" type="button" value="增加" onclick="add()"/>
	<input id="del" type="button" value="删除" onclick="del()"/></br>
	<select id="select" size="6" style="width:120px;">
	<option>1周鹏程</option>
	<option>2周鹏程</option>
	<option>3周鹏程</option>
	</select>
	<script type="text/javascript">
	var select=document.getElementById("select");
	var text=document.getElementById("con");
	var add=function(){
	if(text.value!=""){
	 var op=new Option(text.value);
	 select.options[select.options.length]=op;
	 }else{
		alert("请输入有效字符!");
	  }
	}
	var del=function(){
	if(select.options.length>0){
	 select.options[select.options.length-1]=null;//也可以用select.remove(select.options.length-1)
	 }
	else{
	alert("列表已被清空了!");
	}
	}
	</script>
	</body>

11、使用window对象的location属性
<body id="body">
	<script type="text/javascript">
	var loc=window.location;
	var locStr="当前对象的location信息是:\n";
	for(var propname in loc){
		locStr+=propname+":"+loc[propname]+"\n"
	}
	alert(locStr);
	</script>
	</body>

12、使用window对象的screen属性
	<body id="body">
	<script type="text/javascript">
	var str="当前屏幕的信息是:\n";
	for(var a in window.screen){
		str+=a+":"+window.screen[a]+"\n";
	}
	alert(str);
	</script>
	</body>
//弹出新窗口
	<body id="body">
	<script type="text/javascript">
	var width=window.screen.width;
	var height=window.screen.height;
	window.open("test2.html","_blank","left=0,top=0,width="+width+",height="+height+",toolbar=no,menubar=no,resize=no");	
	</script>

//window对象提供的其他对话框
	<body id="body">
	<script type="text/javascript">
	alert(confirm('请点击一个按钮!点确定我显示true,点取消我显示false'));	
	</script>
	</body>
<span style="white-space:pre">	</span><body id="body">
	显示你输入的内容:<span id="span"></span>
	<script type="text/javascript">
	var content=window.prompt("请输入你的信息:","");
	document.getElementById("span").innerHTML=content;
	</script>
	</body>

13、使用定时器
<body id="body">
		显示当前时间:<span id="time"></span>
	<script type="text/javascript">
	var timer;
	var cur=new Date().getTime();
	var setTime=function(){
		document.getElementById("time").innerHTML=new Date().toLocaleString();
		//设置停止条件
		if(new Date().getTime()-cur>60*1000){clearInterval(timer);}
	}
	timer=window.setInterval("setTime();",1000);//每隔1000ms调用一次

19.获取地理位置(Chrome浏览器直接拒绝、IE不支持、Firefox询问)
<body id="body">	
	<script type="text/javascript">
	var okHandler=function(position){
		var geoMessage="用户所在的地理位置:<br/>";
		geoMsg+="timestamp属性为:"+position.timestamp+"<br/>";
		//获取Coordinates对象,该对象包含了详细地地理位置信息
		var coords=position.coords;
		for(var prop in coords){
		 geoMsg+=prop+":"+coords[prop]+"<br/>";
		}
		document.writeln(geoMsg);
	}


	var errorHandler=function(error){
		var errMsg={
			1:'用户拒绝了位置服务',
			2:'无法获得地理位置信息',
			3:'获取地理位置信息超时'
		};
		alert(errMsg[error.code]);
	}
	//获取地理位置
	navigator.geolocation.getCurrentPosition(okHandler,errorHandler,{enableHighAccuracy:true,maximumAge:1000});
	</script>
	</body>

20、动态生成一个页面
<body id="body">		
	<script type="text/javascript">
	var n=0;//计数器
	var win=null;
	var show=function(msg){
	if((win==null)||(win.closed)){
			win=window.open("","console","width=400,height=250,resizable");
		}
		//让弹窗得到焦点
	win.focus();
	win.document.writeln(msg);
	}
	</script>
	<input type="button" value="单击" onclick="show('您单击了按钮:'+(++n)+'次。<br/>');"/>
	</body>

JavaScript--基于对象的脚本语言学习笔记(二),布布扣,bubuko.com

JavaScript--基于对象的脚本语言学习笔记(二)

上一篇:JAVA程序生成XML文件的格式规范化,缩进,美化。


下一篇:vue 用axios实现调用接口下载excel