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

来源：互联网发布：东方财富网 mac 编辑：程序博客网时间：2024/06/06 13:32

第二部分：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>

0 0