加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript HTML DOM 实例

JavaScript基础 2022-04-25 01:55:12小码哥的IT人生shichen

JavaScript HTML DOM 实例

使用 JavaScript 访问和操作 DOM 对象的实例。

Document 对象

完整实例【显示文档中所有 cookie 的名称/值对】：

<html>
<body>
The cookies associated with this document is: 
<script type="text/javascript">
document.write(document.cookie)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示加载文档的服务器域名】：

<html>
<body>
本文档的域名是：
<script type="text/javascript">
document.write(document.domain)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示上次修改文档的日期和时间】：

<html>
<body>
This document was last modified on:
<script type="text/javascript">
document.write(document.lastModified)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示加载当前文档的文档 URL】：

<html>
<body>
<p>referrer 属性返回加载本文档的文档的 URL。</p>
本文档的 referrer 是：
<script type="text/javascript">
document.write(document.referrer)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示文档的标题】：

<html>
<head>
<title>My title</title>
</head>
<body>
该文档的标题是：
<script type="text/javascript">
document.write(document.title)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示文档的完整 URL】：

<html>
<body>
该文档的 URL 是：
<script type="text/javascript">
document.write(document.URL)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【替换当前文档】：

<html>
<head>
<script type="text/javascript">
function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>学习 DOM 非常有趣！</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }
</script>
</head>
<body>
<input type="button" value="打开并写入一个新文档" onclick="createNewDoc()">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【打开一个新文档，然后添加一些内容】：

<html>
<head>
<script type="text/javascript">
function winTest()
  {
  var txt1 = "This is a new window.";
  var txt2 = "This is a test.";
  win.document.open("text/html","replace");
  win.document.writeln(txt1);
  win.document.write(txt2);
  win.document.close();
  }
</script>
</head>
<body>
<script type="text/javascript">
var win=window.open('','','width=200,height=200');
winTest();
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示具有特定名称的元素数量】：

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>
<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' 的元素有多少个？" />
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示具有特定标签名称的元素数量】：

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>
<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="How many input elements?" />
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Anchors 集合

完整实例【确定文档中锚的数量】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【确定文档中首个锚的 innerHTML】：

<html>
<body>
<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />
本文档中第一个锚的 InnerHTML 是：
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Links 集合

完整实例【显示文档中的链接数】：

<html>
<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
</map>
<br />
文档中链接数目是：
<script type="text/javascript">
document.write(document.links.length)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【显示文档中首个链接的 href 属性】：

<html>
<body>
<img id="planets"
src="/i/eg_planets.jpg" 
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
</map>
<br />
area 元素的 id 是：
<script type="text/javascript">
document.write(document.links[0].id)
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Forms 集合

完整实例【确定文档中的表单数量】：

<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script type="text/javascript">
document.write("文档包含： " + document.forms.length + " 个表单。")
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【找到文档中第一个表单的名称】：

<html>
<body>
<form id="Form1" name="Form1">
您的姓名：<input type="text">
</form>
<form id="Form2" name="Form2">
您的汽车：<input type="text">
</form>
<p>
要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：
</p>
<script type="text/javascript">
document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>")
document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>")
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Images 集合

完整实例【返回文档中的图像数量】：

<html>
<body>
<img border="0" src="/i/eg_smile.gif" />
<br />
<img border="0" src="/i/eg_mouse.jpg" />
<br /><br />
<script type="text/javascript">
document.write("本文档包含：" + document.images.length + " 幅图像。")
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【返回文档中第一个图像的 id】：

<!DOCTYPE html>
<html>
<body>
<img id="img1" src="/i/ct_htmltree.gif">
<img id="img2" src="/i/dom_navigate.gif">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"第一幅图片的 id 是：" + document.images[0].id;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 操作

完整实例【改变 HTML 元素的可见度】：

<!DOCTYPE html>
<html>
<body>
<p id="p1">
这是一段文本。
这是一段文本。
这是一段文本。
</p>
<input type="button" value="隐藏文本" 
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="显示文本"
onclick="document.getElementById('p1').style.visibility='visible'">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【改变 HTML 元素的背景色】：

<!DOCTYPE html>
<html>
<head>
<script>
function bgChange(bg) {
  document.body.style.background = bg;
}
</script>
</head>
<body>
<h1>改变背景颜色</h1>
<p>请把鼠标移动到方块上。</p>
<table style="width:300px;height:100px">
  <tr>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
    onmouseout="bgChange('transparent')"
    style="background-color:Khaki">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
    onmouseout="bgChange('transparent')"
    style="background-color:PaleGreen">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
    onmouseout="bgChange('transparent')"
    style="background-color:Silver">
    </td>
  </tr>
</table>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024