第二部分：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
时间： 2024-10-24 23:07:38