dom学习

来源：互联网发布：茅台葡萄酒知乎编辑：程序博客网时间：2024/06/08 15:00
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>dom学习</title><script type="text/javascript">//改变链接function changeLink(){document.getElementById('myAnchor').innerHTML="访问 W3School"document.getElementById('myAnchor').href="http://www.w3school.com.cn"document.getElementById('myAnchor').target="_blank"}//输出文本document.write("Hello World!");//输出htmldocument.write("<h1>Hello World!</h1>");//返回该文档的标题var a =document.title;//返回该文档的URLvar b =document.URL;//本文档的域名var c=document.domain;//使用getnamefunction getElements()  {  var x=document.getElementsByName("myInput");  alert(x.length);  }//你点击了鼠标哪个键//onmousedown="whichButton(event)" 把这个放到body里就能用了function whichButton(event){var btnNum = event.button;if (btnNum==2)  {  alert("您点击了鼠标右键！")  }else if(btnNum==0)  {  alert("您点击了鼠标左键！")  }else if(btnNum==1)  {  alert("您点击了鼠标中键！");  }else  {  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");  }}//提示按钮的 id 和 类型 + 禁用按钮function alertId(){var txt="Id: " + document.getElementById("myButton").id;txt=txt + ", type: " + document.getElementById("myButton").type;alert(txt);document.getElementById("myButton").disabled=true;}//选定以及不选定 checkboxfunction check(){document.getElementById("myCheck").checked=true}function uncheck(){document.getElementById("myCheck").checked=false}//一个表单中的若干个 checkboxfunction createOrder(){//coffee=document.forms[0].coffee;coffee=document.getElementById("orderform").coffee;txt=""; for (i=0;i<coffee.length;++ i){if (coffee[i].checked);{txt=txt + coffee[i].value + " ";}}document.getElementById("order").value="您订购的咖啡带有： " + txt;}</script></head><body><a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a><input type="button" onclick="changeLink()" value="改变链接"><script type="text/javascript">document.write(a);document.write(b);</script><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" /><a name="first">第一个锚</a><br /><a name="second">第二个锚</a><br /><a name="third">第三个锚</a><br /><br />文档中锚的数目：<script type="text/javascript">document.write(document.anchors.length)</script>本文档中第一个锚的 InnerHTML 是：<script type="text/javascript">document.write(document.anchors[0].innerHTML)</script><form name="Form1" id="Form1"></form><form name="Form2"></form><form name="Form3"></form><script type="text/javascript">document.write("文档包含： " + document.forms.length + " 个表单。");document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>");document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>");</script><img border="0" src="" /><br /><img border="0" src="" /><br /><br /><script type="text/javascript">document.write("本文档包含：" + document.images.length + " 幅图像。")</script><button id="myButton" onClick="alertId()">请点击我！</button><form><input type="checkbox" id="myCheck" /><input type="button" onclick="check()" value="选定复选框" /><input type="button" onclick="uncheck()" value="取消选定复选框" /></form><p>你喜欢怎么喝咖啡？</p><form id="orderform"><input type="checkbox" name="coffee" value="奶油">加奶油<br /><input type="checkbox" name="coffee" value="糖块">加糖块<br /><br /><input type="button" onclick="createOrder()" value="发送订单"><br /><br /><input type="text" id="order" size="50"></form></body></html>
阅读全文
0 0