js学习之Anchor对象和Document对象

最新推荐文章于 2022-08-26 16:53:37 发布

小熊️程序猿

最新推荐文章于 2022-08-26 16:53:37 发布

阅读量326

点赞数

分类专栏： js学习文章标签： html JavaScript ViewUI

js学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

[color=cyan][size=x-large]Anchor对象
[/size][/color]
[b][color=blue]失去焦点和获取焦点[/color][/b][b][color=orange]有时候自己总喜欢忘记,而项目中前段的验证又经常需要,所以做下记载
[/color][/b]

<html>
<head>
<style type="text/css">
          a:active {color:green}
</style>

<script type="text/javascript">
function getfocus(){
  document.getElementById('myAnchor').focus()
}

function losefocus(){
  document.getElementById('myAnchor').blur()
}
</script>
</head>


<body>
<a id="myAnchor" href="http://www.iteye.com/">访问 Iteye</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="获得焦点">
<input type="button" onclick="losefocus()" value="失去焦点">
</body>

</html>

[color=blue][b]
添加快捷键的方法[/b][/color][b][color=orange]例子来源于w3school 其中body的onload属性表示当页面加载完后执行的方法[/color][/b]

<html>
<head>
<script type="text/javascript">
function accesskey()
{
document.getElementById('w3').accessKey="l"
document.getElementById('w3dom').accessKey="k"
}
</script>
</head>

<body onload="accesskey()">

<p><a id="w3" href="http://www.w3school.com.cn/">W3School.com.cn</a> （请使用 Alt + l 给该链接赋予焦点）</p>
<p><a id="w3dom" href="http://www.w3school.com.cn/htmldom/">HTML DOM</a> （请使用 Alt + k 为该链接赋予焦点）</p>

</body>
</html>

[color=cyan][size=x-large]document对象[/size][/color]
[b][color=blue]向输出流写文本或者HTML[/color][/b][b][color=orange]例子来源于w3school [/color][/b]

<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

[b][color=red]ps:如果是在别的事件中调用write会把原页面的数据给覆盖掉只显示write输出的内容[/color][/b]

[b][color=blue]获取文档标题和URL等一些document的属性[/color][/b][b][color=orange]例子来源于w3school [/color][/b]

<html>
<head>
<title>My title</title>
</head>

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

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

<p>referrer 属性返回加载本文档的文档的 URL。</p>

本文档的 referrer 是：
<script type="text/javascript">
document.write(document.referrer)

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

</body>

</html>

[b][color=blue]document常用的2个方法[/color][/b][color=orange][b]代码来源于w3school[/b][/color]


<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}

function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>

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

[b][color=blue]打开一个新文档,加入内容,关闭它[/color][/b][color=orange][b]代码来源于w3school[/b][/color]


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

[color=red]ps:如果没有newDoc.close()那么浏览器会一直处于在加载状态,我也不知道为什么,觉得应该是文档没有关闭,浏览器以为还有内容要加载进来,所以一直处于在加载状态[/color]

[b][color=blue]返回文档中的锚数[/color][/b][color=orange][b]代码来源于w3school[/b][/color]

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


本文档中第一个锚的 InnerHTML 是：
<script type="text/javascript">
   document.write(document.anchors[0].innerHTML)
</script>

</body>
</html>

[b][color=blue]计算文档中表单的数量[/color][/b][color=orange][b]代码来源于w3school[/b][/color]

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

[b][color=blue]访问集合中的项目[/color][/b][color=orange][b]代码来源于w3school[/b][/color]


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

[b][color=blue]计算文档中图片数目[/color][/b][color=orange][b]代码来源于w3school[/b][/color]

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

小熊️程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习之Anchor对象和Document对象

[color=cyan][size=x-large]Anchor对象[/size][/color][b][color=blue]失去焦点和获取焦点[/color][/b][b][color=orange]有时候自己总喜欢忘记,而项目中前段的验证又经常需要,所以做下记载[/color][/b][code="java"] a:active {color:g...
复制链接

扫一扫