HTML DOM 实例学习笔记

来源：互联网发布：医院网络咨询流程图编辑：程序博客网时间：2024/06/05 00:57

1.更改一个链接的文本、URL、target

document.getElementById('myAnchor').innerHTML="访问 W3School"document.getElementById('myAnchor').href="http://www.w3school.com.cn"document.getElementById('myAnchor').target="_blank"

2.document.open() ——打开一个新文档，并擦除当前文档的内容

语法

document.open(mimetype,replace)

参数描述mimetype可选。规定正在写的文档的类型。默认值是 "text/html"。replace可选。当此参数设置后，可引起新文档从父文档继承历史条目。

说明

该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

提示和注释

重要事项：调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。

注释：属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。

function createNewDoc()  {  var newDoc=document.open("text/html","replace");  var txt="<html><body>学习 DOM 非常有趣！</body></html>";  newDoc.write(txt);  newDoc.close();  }

3.在文档中点击，提示点击的左中右哪个按键

<html><head><script type="text/javascript">function whichButton(event){var btnNum = <strong>event.button</strong>;if (btnNum==<strong>0</strong>)  {  alert("您点击了鼠标<strong>左</strong>键！")  }else if(btnNum==<strong>1</strong>)  {  alert("您点击了鼠标<strong>中</strong>键！")  }else if(btnNum==<strong>2</strong>)  {  alert("您点击了鼠标<strong>右</strong>键！");  }else  {  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");  }}</script></head><body onmousedown="whichButton(event)"><p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p></body></html>

4.HTML <form> 标签的 action 属性

action 属性规定当提交表单时，向何处发送表单数据

语法

<form action="value">

下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "form_action.asp" 的页面：

<form action="form_action.asp" method="get">  <p>First name: <input type="text" name="fname" /></p>  <p>Last name: <input type="text" name="lname" /></p>  <input type="submit" value="Submit" /></form>

5.验证表单

<html><head><script type="text/javascript">function validate(){var at=document.getElementById("email").value.indexOf("@")var age=document.getElementById("age").valuevar fname=document.getElementById("fname").valuesubmitOK="true"if (fname.length>10) { alert("名字必须小于 10 个字符。") submitOK="false" }if (isNaN(age)||age<1||age>100) { alert("年龄必须是 1 与 100 之间的数字。") submitOK="false" }if (at==-1)  { alert("不是有效的电子邮件地址。") submitOK="false" }if (submitOK=="false") { return false }}</script></head><body><form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />电子邮件：<input type="text" id="email" size="20"><br /><br /><input type="submit" value="提交"> </form></body></html>

0 0