`

js学习之Anchor对象和Document对象

阅读更多
Anchor对象

失去焦点和获取焦点有时候自己总喜欢忘记,而项目中前段的验证又经常需要,所以做下记载

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


添加快捷键的方法
例子来源于w3school 其中body的onload属性表示当页面加载完后执行的方法

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


document对象
向输出流写文本或者HTML例子来源于w3school

<html>
<body>

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

</body>
</html>


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


获取文档标题和URL等一些document的属性例子来源于w3school
<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>


document常用的2个方法代码来源于w3school
<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>



打开一个新文档,加入内容,关闭它代码来源于w3school
<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>


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


返回文档中的锚数代码来源于w3school
<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>



计算文档中表单的数量代码来源于w3school

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



访问集合中的项目代码来源于w3school
<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>


计算文档中图片数目代码来源于w3school

<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>
分享到:
评论

相关推荐

    js关于document和window对象

    JS 中的 document 对象和 window 对象 在 JavaScript 中,document 对象和 window 对象是两个非常重要的对象,它们都是 Window 对象的属性,用于描述当前显示的文档和浏览器窗口。 document 对象 document 对象是...

    JavaScript 对象与数组参考大全

     anchors数组是document对象的一个属性,是文档内所有anchor对象的一个列表如果anchor也是一个link(链接),则它会同时出现在anchors和links数组中。  属性  length 文档内的锚点个数  B.3 array对象  array对象...

    javascript完全学习手册1 源码

    4.3.1 Anchor对象 89 4.3.2 Link对象 90 4.4 Image对象 92 4.4.1 图像翻转 92 4.4.2 图像载入 92 第5章 JavaScript其他常用 窗口对象 96 5.1 Window对象 96 5.1.1 常用属性和方法 97 5.1.2 多窗口控制 100 5.2 ...

    JavaScript对象参考手册

    例如,`Document`代表整个HTML文档,`Element`对象如`Anchor`、`Button`、`Input`、`Table`等则分别对应HTML元素,它们有自己的属性和方法,如`innerHTML`、`style`、`addEventListener()`等,用于操作页面内容和...

    js基础之DOM中document对象的常用属性方法详解

    1 document.anchors 返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 document.body ...

    js-大总结(JavaScript对象).

    #### B.7 Document对象 **定义:** `Document`对象是`window`或`frames`对象的一个属性,代表在窗口或框架中显示的文档。 **属性:** - **alinkColor:** 活动链接的颜色。 - **anchor:** 文档中的描点对象。 - **...

    JAVASCRIPT对象属性大全[参考].pdf

    6. **document对象**:是`window`和`frames`对象的属性,代表窗口或框架内显示的文档。它有多个属性,如`alinkColor`(活动链接颜色)、`anchors`数组(文档的锚点对象)、`bgColor`(文档背景颜色)、`cookie`...

    javascript完全学习手册2 源码

    4.3.1 Anchor对象 4.3.2 Link对象 4.4 Image对象 4.4.1 图像翻转 4.4.2 图像载入 第5章 JavaScnpt其他常用窗口对象 5.1 Window对象 5.1.1 常用属性和方法 5.1.2 多窗口控制 5.2 Screen对象 5.3 ...

    JS对象与数组参考大全

    #### 二、Anchor对象 - **定义**: 使用`&lt;A NAME="..."&gt;`标记创建的HTML锚点。如果锚点包含了`HREF`属性,则该锚点也可以作为一个链接对象。 - **所属**: `document`对象的一个属性。 - **特点**: 不具备自己的属性...

    JavaScript的document对象和window对象详解

    [document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。 属性 alinkColor 活动链接的颜色(ALINK) anchor 一个HTMI锚点,使用标记创建(该属性本身也是一个对象) anchors array 列出...

    javascript文档操作

    不同的浏览器(例如IE、Firefox、Netscape等)以及同一浏览器的不同版本,对Document对象的方法和属性的支持程度可能会有所不同。例如,IE浏览器中提供了更多的特定属性,如: - **body**:返回文档的body元素。 - ...

    浅谈JavaScript的内置对象和浏览器对象

    在javascript中对象通常包括两种类型:内置对象和浏览器对象,此外,用户还可以自定义对象。 对象包含两个要素: 1. 用来描述对象特性的一组数据,也就是若干变量,通常称为属性。 2. 用来操作对象特性的若干动作,...

    js对象关系图 方便dom操作

    HTML DOM对象参考手册专注于HTML元素的JavaScript表示,如Document对象代表整个HTML文档,可以用来访问和修改页面内容;Element对象如Anchor(链接)、Area(图像映射区域)、Base、Body、Button等,它们都有各自的...

    javascript属性和说明[参考].pdf

    相比之下,`anchors`数组是`document`的属性,它包含了文档内所有`anchor`对象的列表。`anchors`数组的`length`属性用于获取文档内锚点的数量。 接下来,`array`对象是Netscape Navigator 3.0 beta 3引入的新对象,...

    javascript对象与数组参考大全

    Anchor对象** - **简介**: `Anchor` 对象代表 HTML 中的 `&lt;a&gt;` 元素,可以用来获取和设置锚点的相关属性。 - **属性**: - `name`: 获取或设置锚点名称。 - `href`: 获取或设置锚点链接的目标 URL。 - **方法**: ...

    javaScript属性详解

    - **关联性:** Anchor对象是Document对象的一个属性,但本身不包含任何属性或方法。 #### 3. Anchors数组 (B.2) **Anchors数组简介:** - **定义:** Document对象的一个属性,包含了文档内所有Anchor对象的列表。...

    JavaScript中的anchor()方法使用详解

    在JavaScript中,我们可以通过String对象的anchor()方法来创建这些锚点。anchor()方法允许我们定义锚点的名称,并返回相应的HTML锚点标签字符串,这样我们就可以在网页中创建指向特定位置的链接。 JavaScript中的...

    javascrip对象与数组参考大全

    Anchor对象:网页中的锚点 - **定义**:`Anchor`对象表示HTML中的锚点,通常由`&lt;a&gt;`标签创建,可以作为链接的目标。当`&lt;a&gt;`标签包含`href`属性时,它同时也成为`Link`对象。 - **所属对象**:`Anchor`对象是`...

    javascript API docx简洁文档

    JavaScript API 文档简介 本文档主要介绍 JavaScript 中的 API 文档,涵盖了 JavaScript 中常用的...这些对象和事件是 JavaScript 中最基本和最常用的部分,掌握这些知识点对于 JavaScript 开发者来说是非常重要的。

Global site tag (gtag.js) - Google Analytics