js枚举
//4js枚举 function getall() { var sw = document.all.tags("input") for (var i = 0; i < sw.length; i++) {
$("qwe").innerHTML += ("ID为:"+sw[i].id +" ,值为: "+sw[i].value + "<br>");
} }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=3)"> <meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=3)"> <head> <title>无标题页</title> <style type="text/css"> .style1 { 100%; } .style2 { 441px; } .classname1 { font-size:15px; color:ActiveCaption; } .classname2 { font-size:25px; color:Blue;} .classname3 { font-size:35px; color:Green; } .classname4 { font-size:45px; color:Yellow; } </style> <script type="text/javascript"> var cernewdiv = document.createElement("Div"); cernewdiv.setAttribute("id", "crediv1"); cernewdiv.style.width = '200'; cernewdiv.style.height = '50'; cernewdiv.style.backgroundColor = '#0FFccc'; function $(id)//获取ID { return document.getElementById(id); } var oldvalue; function fous1(obj) { oldvalue=obj.value; obj.value=""; } //失焦事件 function unfous1(obj) { if( obj.value=='') { obj.value= oldvalue return false; } else { return true; } } //查找下一个节点 function NextNote1(Obj) { var x = Obj.nextSibling; if (x + '' != '[object]') //FireFox的例外 { x = Obj.nextSibling; } crediv(x); } //在指定的节点里输出 function crediv(obj) { obj.appendChild(cernewdiv); }
//创建一个div将div的name属性设为myDiv 右边输出 function crediv_nameR(obj) { cernewdiv.setAttribute("name", "newdiv1"); NextNote1(obj); cernewdiv.innerHTML ="ID="+ cernewdiv.id +" NAME="+ cernewdiv.name; } //创建一个div将div的name属性设为myDiv body输出 function crediv_nameB(obj) { cernewdiv.setAttribute("name", "newdiv1"); cernewdiv.innerHTML ="ID="+ cernewdiv.id +" NAME="+ cernewdiv.name; crediv(obj); } //修改title function divtitle(obj) { if(unfous1(obj)) { cernewdiv.setAttribute("name", "newdiv1"); cernewdiv.title=obj.value; NextNote1(obj.parentNode); cernewdiv.innerHTML ="ID="+ cernewdiv.id +" title="+ cernewdiv.title; } } //修改ID function divid(obj) { if(unfous1(obj)) { cernewdiv.setAttribute("id", obj.value); cernewdiv.name= "newdiv1"; NextNote1(obj.parentNode); cernewdiv.innerHTML ="ID="+ cernewdiv.id +" name="+ cernewdiv.name; } } //修改className function divclassName(obj) { if(obj.value>0) { cernewdiv.className= obj.options[obj.selectedIndex].text; NextNote1(obj.parentNode); cernewdiv.innerHTML ="ID="+ cernewdiv.id +" className="+ cernewdiv.className; } }
//4js枚举 function getall() { var sw = document.all.tags("input") for (var i = 0; i < sw.length; i++) {
$("qwe").innerHTML += ("ID为:"+sw[i].id +" ,值为: "+sw[i].value + "<br>");
} }
///6.使用innerHTM插入HTML片断 function addinnerHTML() { $("d1").innerHTML = "6.使用innerHTM插入HTML片断给<div id="d1"></div>插入<button>come</button><input type='text' value='OK'/>片断<button>come</button><input type='text' value='OK'/>"; }
//7.说明innerText和outerHTML的区别 function innerText1() { var x=$("outHTML")
alert(x.innerText);
} function outerHTML1() { var x=$("outHTML")
alert(x.outerHTML); }
</script> </head> <body>
<table class="style1"> <tr> <td class="style2"><h1>JavaScript作业</h1></td> <td> <input id="Button6" type="button" value="刷新" onclick="javascript:window.location.reload();"/></td> </tr> <tr> <td class="style2" > <p>1.创建一个div标记,对innerHTML赋值直接修改这个div中的内容,</p> <input id="Button1" type="button" value="右边创建Div" onclick="NextNote1(this.parentNode) " /> <input id="Button2" type="button" value="Body创建Div" onclick="crediv(body) "/> <input id="Button5" type="button" value="动态改变值" onclick='$("crediv1").innerHTML="动态赋值！" '/></td> <td>右边</td> </tr> <tr> <td class="style2"><p>2创建一个div将div的name属性设为myDiv</p> <input id="Button3" type="button" value="右边创建Div" onclick="crediv_nameR(this.parentNode) " /> <input id="Button4" type="button" value="Body创建Div" onclick="crediv_nameB(body) "/> <input id="Button7" type="button" value="动态改变值" onclick='$("crediv1").innerHTML="动态赋值！" '/></td> <td>右边</td> </tr> <tr> <td class="style2"><p>3.构造一个div标记的DOM对象div1,</p> <input id="Text1" type="text" value="设定div1的title" onfocus="fous1(this)" onblur="divtitle(this);" /> <input id="Text2" type="text" value="设定div1的id" onfocus="fous1(this)" onblur="divid(this)" /> <br /> <select id="Select1" name="D1" onchange="divclassName(this)"> <option value="0">设定div1的className</option> <option value="1">classname1</option> <option value="2">classname2</option> <option value="3">classname3</option> <option value="4">classname4</option> </select> </td> <td></td> </tr> <tr> <td class="style2"> <input id="Button8" type="button" value="4.枚举了页面文档中的每一个元素(input)" onclick="getall()"/></td> <td></td> </tr> <tr> <td class="style2"> <input id="Button9" type="button" value="6.使用innerHTM插入HTML片断" onclick="addinnerHTML()" /></td> <td><div id="d1"></div></td> </tr> <tr> <td class="style2"> 7.说明<input id="Button11" type="button" value="outerHTML" onclick="outerHTML1()" />和<input id="Button13" type="button" value="inerHTML" onclick="alert($('outHTML').innerHTML)" />还有<input id="Button10" type="button" value="innerText" onclick="innerText1()" />区别 <input id="Button12" type="button" value="图释" onclick="$('img1').src='outhtml.jpg'" /></td> <td><div id="outHTML"><p style="color: #FF0000;">看我的属性<img id="img1" alt="" src="" /></p></div> <div id="Div1"></div> </td> </tr> <tr> <td class="style2"> 8.说明<input id="Button14" type="button" value="getElementById" onclick="byid1()" />、 <input id="Button15" type="button" value="getElementsByName" onclick="byname1()" />和 <input id="Button16" type="button" value="getElementsByTagName" onclick="bytgname1(this.parentNode)" />的区别 <input id="Button17" type="button" value="button" onclick="bytgname2()" /></td> <td><input name="byname" id="byid" style="color:Red;" value="获取我" />getElementById("id")是通过ID取控件，getElementsByTagName["div"][0]是通过节点取值，结果是集合，getElementsByName["name"][0]也是通过节点取值，结果是集合。</td> </tr> <tr> <td class="style2"> </td> <td> </td> </tr> </table> <script type="text/javascript"> //8.说明getElementById、getElementsByTagName和getElementsByName的区别 function byid1() { var objid = document.getElementById("byid").value; alert(objid+"\n alert(document.getElementById(\"byid\").innerHTML)"); }
function byname1() { var objid = document.getElementsByName("byname")[0].value; alert(objid + "\n alert(document.getElementById(\"byname\")[0].innerHTML)"); }
function bytgname1(Obj) { var x = Obj.nextSibling; if (x + '' != '[object]') //FireFox的例外 { x = Obj.nextSibling; } var objid = x.getElementsByTagName("input")[0].value; alert(objid + "\n alert(document.getElementById(\"input\")[0].innerHTML)"); } function bytgname2() { var objid = document.getElementsByTagName("input")[19].value; alert(objid + "\n alert(document.getElementById(\"input\")[19].innerHTML)"); } </script> <div id="qwe" class="classname2" style="400px;"></div>
</body> </html>