45分钟
JavaScript HTML DOM 实例
使用内置JavaScript的对象实例。
Document 对象
使用 document.write() 输出文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>使用 document.write() 输出 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>返回文档中锚的数目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a name="html">HTML 教程</a><br>
<a name="css">CSS 教程</a><br>
<a name="xml">XML 教程</a><br>
<a href="/js/">JavaScript 教程</a>
<p>锚的数量:
<script>
document.write(document.anchors.length);
</script></p>
</body>
</html>返回文档中第一个锚的 innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a name="html">HTML 教程</a><br>
<a name="css">CSS 教程</a><br>
<a name="xml">XML 教程</a>
<p>文档中第一个锚:
<script>
document.write(document.anchors[0].innerHTML);
</script>
</p>
</body>
</html>返回文档中表单的数目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form></form>
<p>表单数目:
<script>
document.write(document.forms.length);
</script></p>
</body>
</html>返回文档中第一个表单的名字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form></form>
<p>第一个表单名称:
<script>
document.write(document.forms[0].name);
</script></p>
</body>
</html>返回文档中的图像数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img border="0" src="klematis.jpg" width="150" height="113">
<img border="0" src="klematis2.jpg" width="152" height="128">
<p>图像数目:
<script>
document.write(document.images.length);
</script></p>
</body>
</html>返回文档中第一个图像的ID
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="runoob1" border="0" src="klematis.jpg" width="150" height="113">
<img id="runoob2" border="0" src="klematis2.jpg" width="152" height="128">
<p>第一个图像的ID：
<script>
document.write(document.images[0].id);
</script></p>
</body>
</html>返回文档中的链接数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
<p><a href="/js/">JavaScript 教程</a></p>
<p>链接/地址数目:
<script>
document.write(document.links.length);
</script></p>
</body>
</html>返回文档中的第一个链接的ID
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap">
<map name="planetmap">
<area id="sun" shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area id="mercury" shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area id="venus" shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
<p><a id="javascript" href="/js/">JavaScript 教程</a></p>
<p>第一个链接/地址的ID：
<script>
document.write(document.links[0].id);
</script></p>
</body>
</html>返回文档中的所有cookies的名称/值对
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
与此文档相关的Cookies:
<script>
document.write(document.cookie);
</script>
</body>
</html>返回加载的文档的服务器域名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
加载这个文件的域名:
<script>
document.write(document.domain);
</script>
</body>
</html>返回文档的最后一次修改时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
文档最后修改:
<script>
document.write(document.lastModified);
</script>
</body>
</html>返回加载的当前文档的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
本文档的引用地址:
<script>
document.write(document.referrer);
</script>
</body>
</html>返回文档的标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
文档的标题为:
<script>
document.write(document.title);
</script>
</body>
</html>返回文档的完整的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
文档的完整的URL:
<script>
document.write(document.URL);
</script>
</body>
</html>打开输出流，向流中输入文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function createDoc(){
var doc=document.open("text/html","replace");
var txt="<!DOCTYPE html><html><body>学习 HTML DOM 很有趣!</body></html>";
doc.write(txt);
doc.close();
}
</script>
</head>
<body>
<input type="button" value="新文档" onclick="createDoc()">
</body>
</html>write() 和 writeln()的不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>注意write()方法不会在每个语句后面新增一行：</p>
<pre>
<script>
document.write("Hello World!");
document.write("Have a nice day!");
</script>
</pre>
<p>注意writeln()方法在每个语句后面新增一行：</p>
<pre>
<script>
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</pre>
</body>
</html>用指定的ID弹出一个元素的innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function getValue(){
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">点击我!</h1>
</body>
</html>用指定的Name弹出元素的数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getElements(){
var x=document.getElementsByName("x");
alert(x.length);
}
</script>
</head>
<body>
猫:
<input name="x" type="radio" value="猫">
狗:
<input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名称为 'x'的元素?">
</body>
</html>用指定的tagname弹出元素的数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getElements(){
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="多少input元素?">
</body>
</html>Anchor 对象
返回和设置链接的charset属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a id="runoob" charset="ISO-8859-1" href="//www.runoob.com/">菜鸟教程</a><br>
<script>
document.write("返回链接的charset: ");
document.write(document.getElementById('runoob').charset);
document.write("<br><br>");
</script>
<a id="google" href="//www.google.com/">Google</a><br>
<script>
document.getElementById('google').charset="utf-8";
document.write("设置链接的charset: ");
document.write(document.getElementById('google').charset);
</script>
</body>
</html>返回和设置链接的href属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><a id="runoob" href="//www.runoob.com/">菜鸟教程</a></p>
<script>
document.write("返回 href 链接: ");
document.write(document.getElementById('runoob').href);
</script>
</body>
</html>返回和设置链接的hreflang属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a id="runoob" hreflang="zh-cn" href="//www.runoob.com/">菜鸟教程</a><br>
<script>
document.write("返回链接的hreflang: ");
document.write(document.getElementById('runoob').hreflang);
document.write("<br><br>");
</script>
<a id="google" href="//www.google.com/">Google</a><br>
<script>
document.getElementById('google').hreflang="no";
document.write("设置链接的hreflang: ");
document.write(document.getElementById('google').hreflang);
</script>
</body>
</html>返回一个锚的名字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><a href="#C6">参见第6章</a></p>
<h2>第1章</h2>
<p>这一章解释了 ba bla bla</p>
<h2>第2章</h2>
<p>这一章解释了 ba bla bla</p>
<h2>第3章</h2>
<p>这一章解释了 ba bla bla</p>
<h2>第4章</h2>
<p>这一章解释了 ba bla bla</p>
<h2>第5章</h2>
<p>这一章解释了 ba bla bla</p>
<h2><a id="c6" name="C6">第6章</a></h2>
<p>这一章解释了 ba bla bla</p>
<script>
document.write("返回锚: ");
document.write(document.getElementById("c6").name);
</script>
</body>
</html>返回当前的文件和链接的文档之间的关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><a id="func" rel="friend" href="//www.functravel.com/">优惠航班</a></p>
<script>
document.write("当前文档和链接的文档之间的关系: ");
document.write(document.getElementById("func").rel);
</script>
</body>
</html>改变链接的target属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeTarget(){
document.getElementById('runoob').target="_blank";
}
</script>
</head>
<body>
<a id="runoob" href="//www.runoob.com">访问菜鸟教程</a>
<br><br>
<input type="button" onclick="changeTarget()" value="修改target">
<p>尝试在你单击按钮之前点击链接。</p>
</body>
</html>返回一个链接的type属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p><a id="runoob" type="text/html" href="//www.runoob.com">菜鸟教程</a></p>
<script>
document.write("返回链接的type属性值：");
document.write(document.getElementById("runoob").type);
</script>
</body>
</html>Area 对象
返回图像映射某个区域的替代文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="金星" href="venus.htm">
</map>
<p>金星的替代文本:
<script>
document.write(document.getElementById("venus").alt);
</script>
</p>
</body>
</html>返回图像映射某个区域的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>金星的坐标:
<script>
document.write(document.getElementById("venus").coords);
</script>
</p>
</body>
</html>返回一个区域的href属性的锚部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm#description">
</map>
<p>金星href属性的锚：
<script>
document.write(document.getElementById("venus").hash);
</script>
</p>
</body>
</html>返回的主机名：图像映射的某个区域的端口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>金星区域的 hostname:port:
<script>
document.write(document.getElementById('venus').host);
</script>
</p>
<p><b>注意:</b>如果没有指定端口部分的URL,或者是80(默认),一些浏览器将不会显示端口的部分。</p>
</body>
</html>返回图像映射的某个区域的hostname
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Venus 区域的主机名称:
<script>
document.write(document.getElementById('venus').hostname);
</script>
</p>
</body>
</html>返回图像映射的某个区域的port
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>“金星”区域的port:
<script>
document.write(document.getElementById('venus').port);
</script>
</p>
<p><b>注意:</b>如果没有指定端口部分的URL,或者是80(默认),一些浏览器会显示0或什么都没有。</p>
</body>
</html>返回图像映射的某个区域的href
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>金星的href属性值:
<script>
document.write(document.getElementById("venus").href);
</script>
</p>
</body>
</html>返回图像映射的某个区域的pathname
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif"width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>金星区域的路径:
<script>
document.write(document.getElementById('venus').pathname);
</script>
</p>
<p><b>注意:</b> IE和Opera浏览器返回 "jsref/venus.htm",
而Firefox, Chrome, 和 Safari浏览器返回 "/jsref/venus.htm".</p>
</body>
</html>返回图像映射的某个区域的protocol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>金星区域的 protocol:
<script>
document.write(document.getElementById('venus').protocol);
</script>
</p>
</body>
</html>返回一个区域的href属性的querystring部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm?id=venus">
</map>
<p>金星区域的查询字符串部分：
<script>
document.write(document.getElementById('venus').search);
</script>
</p>
</body>
</html>返回图像映射的某个区域的shape
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>金星区域的形状:
<script>
document.write(document.getElementById("venus").shape);
</script>
</p>
</body>
</html>返回图像映射的某个区域的target的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" target="_blank">
</map>
<p>“金星”区域taget属性的值是:
<script>
document.write(document.getElementById("venus").target);
</script>
</p>
</body>
</html>Base 对象
返回页面上所有相对URL的基URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base id="htmldom" href="//www.w3cschool.cc/jsref/">
</head>
<body>
<p>基础URL 是:
<script>
document.write(document.getElementById("htmldom").href);
</script>
</p>
</body>
</html>返回页面上所有相对链接的基链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base id="htmldom" target="_blank" href="//www.runoob.com/jsref/">
</head>
<body>
<p>所有链接的基链接:
<script>
document.write(document.getElementById("htmldom").target);
</script>
</p>
</body>
</html>Button 对象
当点击完button不可用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form>
按钮:
<input type="button" id="firstbtn" value="OK">
<input type="button" id="secondbtn" value="OK">
</form>
<p>点击下面的按钮取消上面的第一个按钮。</p>
<button onclick="disableElement()">取消按钮</button>
<script>
function disableElement(){
document.getElementById("firstbtn").disabled=true;
}
</script>
</body>
</html>返回一个button的name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button id="button1" name="button1">点我!</button>
<p>按钮的名称：
<script>
document.write(document.getElementById("button1").name);
</script></p>
</body>
</html>返回一个button的type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function alertType(){
alert(document.getElementById("myButton").type)
}
</script>
</head>
<body>
<button id="myButton" type="button" onclick="alertType()">点我!</button>
</body>
</html>返回一个button的value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<input type="button" id="button1" value="点我!">
<p>按钮的文本:
<script>
document.write(document.getElementById("button1").value);
</script></p>
</body>
</html>返回一个button所属表的ID
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="form1">
<button id="button1" type="button">点我!</button>
</form>
<p>含有按钮的表单的ID:
<script>
document.write(document.getElementById("button1").form.id);
</script></p>
</body>
</html>Form 对象
返回一个表单中所有元素的value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" action="demo-form.php">
第一个名字: <input type="text" name="fname" value="Donald"><br>
第二个名字: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="提交">
</form>
<p>返回表单中每个元素的值：</p>
<script>
var x=document.getElementById("frm1");
for (var i=0;i<x.length;i++){
document.write(x.elements[i].value);
document.write("<br>");
}
</script>
</body>
</html>返回一个表单acceptCharset属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" accept-charset="ISO-8859-1">
第一个名字: <input type="text" name="fname" value="Donald"><br>
最后一个名字: <input type="text" name="lname" value="Duck"><br>
</form>
<p>the accept-charset属性的值:
<script>
document.write(document.getElementById("frm1").acceptCharset)
</script>
</p>
</body>
</html>返回一个表单action属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" action="demo-form.php">
第一个名字: <input type="text" name="fname" value="Donald"><br>
最后一个名字: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="提交">
</form>
<p>action属性的值为：
<script>
document.write(document.getElementById("frm1").action);
</script>
</p>
</body>
</html>返回表单中的enctype属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" enctype="text/plain">
第一个名字: <input type="text" name="fname" value="Donald"><br>
第二个名字: <input type="text" name="lname" value="Duck"><br>
</form>
<p>表单数据将被编码为：
<script>
document.write(document.getElementById("frm1").enctype);
</script>
</p>
</body>
</html>返回一个表单中元素的数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" action="demo-form.php">
第一个名称: <input type="text" name="fname" value="Donald"><br>
第二个名称: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="提交">
</form>
<p>"frm1"元素的数量为:
<script>
document.write(document.getElementById("frm1").length);
</script>
</p>
</body>
</html>返回发送表单数据的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" action="form_action.asp" method="get">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="提交">
</form>
<p>发送表单数据的方法：
<script>
document.write(document.getElementById("frm1").method);
</script>
</p>
</body>
</html>返回一个表单的name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" name="form1">
第一个名称: <input type="text" name="fname" value="Donald"><br>
第二个名称: <input type="text" name="lname" value="Duck"><br>
</form>
<p>表单名称为:
<script>
document.write(document.getElementById("frm1").name);
</script>
</p>
</body>
</html>返回一个表单target属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="frm1" action="form_action.asp" target="_blank">
第一个名称: <input type="text" name="fname" value="Donald"><br>
最后一个名称: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="提交">
</form>
<p>target属性的值为:
<script>
document.write(document.getElementById("frm1").target);
</script>
</p>
</body>
</html>重置表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function formReset(){
document.getElementById("frm1").reset();
}
</script>
</head>
<body>
<p>在下面的输入框中输入一些文本,然后按下“重置表单”按钮重置表单。</p>
<form id="frm1">
第一个名称: <input type="text" name="fname"><br>
最后一个名称: <input type="text" name="lname"><br><br>
<input type="button" onclick="formReset()" value="重置表单">
</form>
</body>
</html>提交表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function formSubmit(){
document.getElementById("frm1").submit();
}
</script>
</head>
<body>
<p>在下面的输入框中输入一些文本,然后按下“提交表单”按钮提交表单。</p>
<form id="frm1" action="form_action.asp">
第一个名称: <input type="text" name="fname"><br>
最后一个名称: <input type="text" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="提交表单">
</form>
</body>
</html>Frame/IFrame 对象
对iframe排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>这里是一些文本。 这里是一些文本。这里是一些文本。
这里是一些文本。这里是一些文本。这里是一些文本。
这里是一些文本。这里是一些文本。这里是一些文本。
<iframe id="myframe" src="//www.runoob.com">
<p>你的浏览器不支持iftames。</p>
</iframe>
这里是一些文本。这里是一些文本。这里是一些文本。
这里是一些文本。这里是一些文本。这里是一些文本。
这里是一些文本。这里是一些文本。这里是一些文本。</p>
<script>
document.getElementById("myframe").align="right";
</script>
</body>
</html>改变一个包含在iframe中的文档的背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeStyle(){
var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.body.style.backgroundColor="#0000ff";
}
</script>
</head>
<body>
<iframe id="myframe" src="demo_iframe.htm">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeStyle()" value="修改背景颜色">
</body>
</html>返回一个iframe中的frameborder属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com" frameborder="0">
<p>你的浏览器不支持 iframes.</p>
</iframe>
<p>这个frameborder已设置:
<script>
document.write(document.getElementById("myframe").frameBorder);
</script>
<p>
</body>
</html>删除iframe的frameborder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function removeBorder(){
document.getElementById("myframe").frameBorder="0";
}
</script>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="removeBorder()" value="移除边界">
<p><b>注意:</b> 该实例不能工作在IE浏览器。</p>
</body>
</html>改变iframe的高度和宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeSize(){
document.getElementById("myframe").height="300";
document.getElementById("myframe").width="300";
}
</script>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com" height="200" width="200">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeSize()" value="修改大小">
</body>
</html>返回一个iframe中的longdesc属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com" longdesc="w3s.txt">
<p>你的浏览器不支持iframes.</p>
</iframe>
<p>图像描述信息页面的 URL:
<script>
document.write(document.getElementById("myframe").longDesc);
</script>
<p>
</body>
</html>返回一个iframe中的marginheight属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe id="myframe" src="demo_iframe.htm" marginheight="50" marginwidth="50">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<p>marginheight属性的值为:
<script>
document.write(document.getElementById("myframe").marginHeight);
</script>
<p>
</body>
</html>返回一个iframe中的marginwidth属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe id="myframe" src="demo_iframe.htm" marginheight="50" marginwidth="50">
<p>你的浏览器不支持iframes.</p>
</iframe>
<br><br>
<p>marginwidth属性的值为:
<script>
document.write(document.getElementById("myframe").marginWidth);
</script>
<p>
</body>
</html>返回一个iframe中的name属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com" name="myframe">
<p>你的浏览器不支持iframes.</p>
</iframe>
<p>iframe的名称为:
<script>
document.write(document.getElementById("myframe").name);
</script>
<p>
</body>
</html>返回和设置一个iframe中的scrolling属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function removeScroll(){
document.getElementById("myframe").scrolling="no";
}
</script>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com" scrolling="auto">
<p>你的浏览器不支持iframes。</p>
</iframe>
<p>scrolling属性的值为:
<script>
document.write(document.getElementById("myframe").scrolling);
</script>
<p>
<input type="button" onclick="removeScroll()" value="移除滚动条">
<p>IE,Google Chrome,Opera,和Safari 在设置滚动条时会出现问题。</p>
</body>
</html>改变一个iframe的src
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeSrc(){
document.getElementById("myframe").src="//www.baidu.com";
}
</script>
</head>
<body>
<iframe id="myframe" src="//www.runoob.com">
<p>你的浏览器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeSrc()" value="修改源链接">
</body>
</html>Image 对象
对image排版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function alignImg(){
document.getElementById("compman").align="right";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98">
<p>一些文本。一些文本。一些文本。一些文本。一些文本。</p>
<input type="button" onclick="alignImg()" value="图像对齐">
</body>
</html>返回image的替代文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="compman" src="compman.gif" alt="Crazy computerman" width="107" height="98">
<p>alt属性值为:
<script>
document.write(document.getElementById("compman").alt);
</script>
</p>
</body>
</html>给image加上border
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function addBorder(){
document.getElementById("compman").border="2";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98">
<br><br>
<input type="button" onclick="addBorder()" value="加上边框">
</body>
</html>改变image的高度和宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeSize(){
document.getElementById("compman").height="250";
document.getElementById("compman").width="300";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSize()" value="修改图像大小">
</body>
</html>设置image的hspace和vspace属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function setSpace(){
document.getElementById("compman").hspace="50";
document.getElementById("compman").vspace="50";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98">
<p>一些文本。一些文本。一些文本。一些文本。</p>
<input type="button" onclick="setSpace()" value="设置水平和垂直间距">
</body>
</html>返回image的longdesc属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="compman" src="compman.gif" longdesc="description.htm" alt="Computerman" width="107" height="98">
<br>
<p>longdesc属性的值为:
<script>
var x=document.getElementById("compman");
document.write(document.getElementById("compman").longDesc);
</script>
</p>
</body>
</html>创建一个链接指向一个低分辨率的image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="Computerman" width="107" height="98">
<br>
<script>
var x=document.getElementById("compman");
document.write('<a href="' + x.lowsrc + '">低分辨率</a>');
</script>
</body>
</html>返回image的name
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="compman" name="compman" src="compman.gif" alt="Computerman" width="107" height="98">
<br>
<script>
document.write("图像名称: ");
document.write(document.getElementById('compman').name);
</script>
</body>
</html>改变image的src
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeSrc(){
document.getElementById("myImage").src="hackanm.gif";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSrc()" value="修改图片">
<p><b>注意：</b> src 属性可以在任何时候被修改。但是如果新的图片没有指定高度和宽度，则新图片会采用旧图片的高度和宽度。</p>
</body>
</html>返回一个客户端图像映射的usemap的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="planets" src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="The planet Venus" href="venus.htm">
</map>
<p>usemap属性的值:
<script>
document.write(document.getElementById("planets").useMap);
</script>
</p>
</body>
</html>Event 对象
被按下的键盘键的keycode？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function whichButton(event){
alert(event.keyCode);
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>
<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>
</body>
</html>鼠标的坐标？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function show_coords(event){
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">点击这一行。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>鼠标相对于屏幕的坐标？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
function coordinates(event){
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>
</body>
</html>shift键被按下了吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function isKeyPressed(event){
if (event.shiftKey==1){
alert(" shift 键被按下!");
}
else{
alert(" shift 键没被按下!");
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>点击该段落，弹窗会提示是否按下 shift 键。</p>
</body>
</html>哪个事件发生了？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
function getEventType(event){
alert(event.type);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p>在文档中点击某个位置。消息框会提示你触发的事件类型。</p>
</body>
</html>Option 和 Select 对象
禁用和启用下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function disable(){
document.getElementById("mySelect").disabled=true;
}
function enable(){
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>梨子</option>
<option>香蕉</option>
<option>橙子</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="禁用列表">
<input type="button" onclick="enable()" value="启用列表">
</form>
</body>
</html>获得有下拉列表的表单的ID
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<form id="myForm">
<select id="mySelect">
<option>苹果</option>
<option>梨子</option>
<option>香蕉</option>
<option>橙子</option>
</select>
</form>
<p>form的ID为：
<script>
document.write(document.getElementById("mySelect").form.id);
</script>
</p>
</body>
</html>获得下拉列表的选项数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getLength(){
alert(document.getElementById("mySelect").length);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>梨子</option>
<option>香蕉</option>
<option>橙子</option>
</select>
<input type="button" onclick="getLength()" value="列表有几种选择?">
</form>
</body>
</html>将下拉列表变成多行列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeSize(){
document.getElementById("mySelect").size=4;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>香蕉</option>
<option>橙子</option>
<option>甜瓜</option>
</select>
<input type="button" onclick="changeSize()" value="修改列表大小">
</form>
</body>
</html>在下拉列表中选择多个选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function selectMultiple(){
document.getElementById("mySelect").multiple=true;
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option>苹果</option>
<option>梨子</option>
<option>香蕉</option>
<option>橙子</option>
</select>
<input type="button" onclick="selectMultiple()" value="选择多个">
</form>
<p>在你点击“选择多个”按钮之前,尽量选择一个以上的选项(通过按下shift或Ctrl键)。然后尝试点击“选择多个”按钮。</p>
</body>
</html>弹出下拉列表中被选中的选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getOptions(){
var x=document.getElementById("mySelect");
var txt="选中的选项是: ";
var i;
for (i=0;i<x.length;i++){
if(x.options[i].selected) {
txt=txt + "\n" + x.options[i].text;
}
}
alert(txt);
}
</script>
</head>
<body>
<form>
你喜欢的水果是：
<select id="mySelect">
<option>苹果</option>
<option>橙子</option>
<option>菠萝</option>
<option>香蕉</option>
</select>
<br><br>
<input type="button" onclick="getOptions()" value="输出选中选项">
</form>
</body>
</html>弹出下拉列表中被选中的选项的索引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getIndex(){
var x=document.getElementById("mySelect");
alert(x.selectedIndex);
}
</script>
</head>
<body>
<form>
你喜欢的水果是：
<select id="mySelect">
<option>苹果</option>
<option>橙子</option>
<option>菠萝</option>
<option>香蕉</option>
</select>
<br><br>
<input type="button" onclick="getIndex()" value="弹出选中项">
</form>
</body>
</html>改变下拉列表中被选中的选项的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeText(){
var x=document.getElementById("mySelect");
x.options[x.selectedIndex].text="甜瓜";
}
</script>
</head>
<body>
<form>
选择你最喜欢的水果:
<select id="mySelect">
<option>苹果</option>
<option>橙子</option>
<option>菠萝</option>
<option>香蕉</option>
</select>
<br><br>
<input type="button" onclick="changeText()" value="设置你的选项">
</form>
</body>
</html>删除下拉列表中的选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function removeOption(){
var x=document.getElementById("mySelect");
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>梨子</option>
<option>香蕉</option>
<option>橙子</option>
</select>
<input type="button" onclick="removeOption()" value="移除你的选项">
</form>
</body>
</html>Table, TableHeader, TableRow, TableData 对象
改变表格边框的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeBorder(){
document.getElementById('myTable').border="10";
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br>
<input type="button" onclick="changeBorder()" value="修改边框">
</body>
</html>改变表格的cellpadding和cellspacing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function padding(){
document.getElementById('myTable').cellPadding="15";
}
function spacing(){
document.getElementById('myTable').cellSpacing="15";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br>
<input type="button" onclick="padding()" value="修改单元格边距">
<input type="button" onclick="spacing()" value="修改单元格间距">
</body>
</html>指定表格的frame
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function aboveFrames(){
document.getElementById('myTable').frame="above";
}
function belowFrames(){
document.getElementById('myTable').frame="below";
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br>
<input type="button" onclick="aboveFrames()" value="显示上frames">
<input type="button" onclick="belowFrames()" value="显示下frames">
</body>
</html>为表格指定规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function rowRules(){
document.getElementById('myTable').rules="rows";
}
function colRules(){
document.getElementById('myTable').rules="cols";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>行1 列1</td>
<td>行1 列2</td>
</tr>
<tr>
<td>行2 列1</td>
<td>行2 列2</td>
</tr>
<tr>
<td>行3 列1</td>
<td>行3 列2</td>
</tr>
</table>
<br>
<input type="button" onclick="rowRules()" value="只显示行边框">
<input type="button" onclick="colRules()" value="至显示列边框">
</body>
</html>一个行的innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function showRow(){
alert(document.getElementById('myTable').rows[0].innerHTML);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>行1 列1</td>
<td>行1 列2</td>
</tr>
<tr>
<td>行2 列1</td>
<td>行2 列2</td>
</tr>
<tr>
<td>行3 列1</td>
<td>行3 列2</td>
</tr>
</table>
<br>
<input type="button" onclick="showRow()" value="显示第一行的HTML文本">
</body>
</html>一个单元格的innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function cell(){
var x=document.getElementById('myTable').rows[0].cells;
alert(x[0].innerHTML);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>
<br>
<input type="button" onclick="cell()" value="第一个单元格">
</body>
</html>为表格创建一个标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function createCaption(){
var x=document.getElementById('myTable').createCaption();
x.innerHTML="表的标题";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>行1 列1</td>
<td>行1 列2</td>
</tr>
<tr>
<td>行2 列1</td>
<td>行2 列2</td>
</tr>
</table>
<br>
<input type="button" onclick="createCaption()" value="创建标题">
</body>
</html>删除表格中的行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>行 1</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>行 2</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>行 3</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>添加表格中的行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function insRow(){
var x=document.getElementById('myTable').insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="新单元格1";
z.innerHTML="新单元格2";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>行1 列1</td>
<td>行1 列2</td>
</tr>
<tr>
<td>行2 列1</td>
<td>行2列2</td>
</tr>
<tr>
<td>行3 列1</td>
<td>行3 列2</td>
</tr>
</table>
<br>
<input type="button" onclick="insRow()" value="插入行">
</body>
</html>添加表格行中的单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function insCell(){
var x=document.getElementById('tr1').insertCell(0);
x.innerHTML="The famous";
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="insCell()" value="插入单元格">
</body>
</html>单元格内容水平对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function leftAlign(){
document.getElementById('header').align="left";
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr id="header">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="leftAlign()" value="内容向右对齐" />
<p><b>注意:</b>该实例不适用IE浏览器。</p>
</body>
</html>单元格内容垂直对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function topAlign(){
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>第一名字</th>
<th>下一个名字</th>
<th>文本</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>你好，我的名字叫Peter Griffin.
需要长文本来演示这个例子。
需要长文本来演示这个例子。</td>
</tr>
</table>
<br>
<input type="button" onclick="topAlign()" value="垂直对齐" />
</body>
</html>对单个单元格的内容水平对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function alignCell(){
document.getElementById('td1').align="right";
document.getElementById('td2').align="right";
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>第一个名称</th>
<th>下一个名称</th>
</tr>
<tr>
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="alignCell()" value="右对齐单元格" />
</body>
</html>对单个单元格的内容垂直对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function valignCell(){
var x=document.getElementById('myTable').rows[0].cells;
x[0].vAlign="bottom";
}
</script>
</head>
<body>
<table id="myTable" border="1" >
<tr>
<td height="50px">第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td height="50px">第三个单元格</td>
<td>第四个单元格</td>
</tr>
</table>
<form>
<input type="button" onclick="valignCell()" value="第一个单元格内容底部对齐">
</form>
</body>
</html>改变单元格的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeContent(){
var x=document.getElementById('myTable').rows[0].cells;
x[0].innerHTML="新内容";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>行1 列1</td>
<td>行1 列2</td>
</tr>
<tr>
<td>行2 列1</td>
<td>行2 列2</td>
</tr>
<tr>
<td>行3 列1</td>
<td>行3 列2</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="修改内容">
</form>
</body>
</html>改变行的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function setColSpan(){
var x=document.getElementById('myTable').rows[0].cells;
x[0].colSpan="2";
x[1].colSpan="6";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td colspan="4">单元格 1</td>
<td colspan="4">单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
<td>单元格 5</td>
<td>单元格 6</td>
<td>单元格 7</td>
<td>单元格 8</td>
<td>单元格 9</td>
<td>单元格 10</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="修改合并列">
</form>
</body>
</html>
学员评价