`

js学习之Anchor对象和Document对象

htmlJavaScript 
阅读更多
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>
分享到：
| javascript/jquery判断是否为undefined或 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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完全学习手册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基础之DOM中document对象的常用属性方法详解

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

    JavaScript的document对象和window对象详解

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

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

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

    JavaScript中文参考手册

    这一章对应于文档及其关联对象 document，Layer，Link，Anchor，Area，Image 和 Applet。 document 属性 方法 Link 属性 方法 Area Anchor Image 属性 方法 Applet Layer 属性 方法 第六章 窗口 这一...

    JavaScript语言参考手册

    这一章对应于文档及其关联对象 document，Layer，Link，Anchor，Area，Image 和 Applet。 document 属性 方法 Link 属性 方法 Area Anchor Image 属性 方法 Applet Layer 属性 方法 第六章 窗口 这一章对应于 ...

    js对象关系图 方便dom操作

    js对象关系图 JavaScript 对象参考手册 本参考手册描述每个对象的属性和方法，并提供实例。 Array Boolean Date Math Number String RegExp Global Browser 对象参考手册 本参考手册描述每个对象的属性和方法，并...

    精通javascript

    • 11.4.htm Document对象部分属性与方法的使用 • 11.5.htm HTML文档属性属性 • 11.6.htm 同时使用name和id • 11.7.htm 事件控制器的例子 • 11.8.htm JavaScript实现...

    aos.js动画的用法

    在页面中引入aos.css文件,jquery和aos.js文件 &lt;link rel="stylesheet" href="dist/aos.css" /&gt; [removed][removed] [removed][removed] HTML结构 要使用aos动画库，你需要做的就是在需要动画的元素上添加aos...

    精通JavaScript

    • 11.4.htm Document对象部分属性与方法的使用 • 11.5.htm HTML文档属性属性 • 11.6.htm 同时使用name和id • 11.7.htm 事件控制器的例子 • 11.8.htm JavaScript实现...

    《javaScrip开发技术大全》源代码

    • sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载边解析的JavaScript代码 • sample10.htm 先加载后解析的JavaScript代码 • sample11.htm 单行...

    出现问题a is defined高手帮忙

    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(3, 120)); }; //鼠标按下事件 DragZoomControl.prototype.coverMousedown_ = function(e){ var G = this.globals; var pos = this.getRelPos_(e);...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

Magicbox
Global site tag (gtag.js) - Google Analytics