吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
document.write("Hello World!");
</script>

</body>
</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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>