javascript之dom编程（3）：常用对象2
分类：javascript
一：document对象
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><script type="text/javascript">//document最重要的三个方法//getElementById [html php jsp] (如果页面中有多个相同的id,则返回第一个对象引用)//getElementsByName 通过html控件的名字返回对象集合 多用于多选。//getElementsByTagName 通过html的标签名返回对象集合//1.id获取对象function test(){var a1=document.getElementById("a1");window.alert(a1.id+" "+a1.href+" "+a1.innerText);}//2.通过name获取对象function test2(){var hobies=document.getElementsByName("hobby");//遍历这个集合for(var i=0;i<hobies.length;i++){if(hobies[i].checked){window.alert("你的爱好是："+hobies[i].value);}}}//3.通过标签名获取对象function test3(){var input=document.getElementsByTagName("input");window.alert(input.length);}</script><body><a id="a1" href="">连接到sina</a><br/><a id="a1" href="">连接到sohu</a><br/><a id="a3" href="">连接到baidu</a><br/><input type="button" value="测试" onclick="test()"/><br/>请选择你的爱好:<input type="checkbox" name="hobby" value="旅游">旅游<input type="checkbox" name="hobby" value="音乐">音乐<input type="checkbox" name="hobby" value="体育">体育<input type="checkbox" name="hobby" value="电影">电影<input type="button" value="看看你的爱好" onclick="test2()"/><br/><input type="button" value="通过tagname来获取元素" onclick="test3()"/><br/></body><hr></body></html>
二：综合案例，操作节点
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><script type="text/javascript">//综合案例/*createElement() 方法创建新的元素节点：appendChild() 方法向已存在的节点添加子节点。removeChild() 方法删除指定的节点。parentNode 属性可返回某节点的父节点。*/function test4(){var myhref=document.createElement("a");myhref.innerText="连接到sina";myhref.href="";myhref.id="myhref";div1.appendChild(myhref);}function test5(){var node=document.getElementById(‘myhref’);node.parentNode.removeChild(node);}</script><body><input type="button" value="创建一个a标签" onclick="test4()"/><br/><input type="button" value="删除一个a标签" onclick="test5()"/><br/><div id="div1" style="width:200px;height:200px;background-color:green">div1</div></body><hr></body></html>
三：查询键盘编码
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><script type="text/javascript">function test(){window.alert("你按下键的编码："+window.event.keyCode);}</script><body><input type="button" onkeydown="test()" value="tesing"/></body><hr></body></html>
版权声明：博主原创文章，转载请说明出处。
上一篇java内部类的使用下一篇javascript之dom编程（4）：常用对象3
顶1踩0
，以诚感人者，人亦诚而应。
