跟我学JavaScript--HTML DOM --DOM实例--document对象_document.write(document.anchors.length)-CSDN博客

本文链接：https://blog.csdn.net/panlu666_pl/article/details/70852360

1.使用document.write()输出文本

语法：document.write();

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

运行结果：
这里写图片描述

2.使用 document.write() 输出 HTML

语法：document.write();

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

运行结果：
这里写图片描述

3.返回文档中锚的数目

语法：document.anchors.length

<a name="html">HTML </a><br>
<a name="css">CSS </a><br>
<a name="xml">XML </a><br>
<a name="js">JavaScript </a>

<p>锚的数量:
<script>
document.write(document.anchors.length);
</script>
</p>

运行结果：
这里写图片描述

注：锚必须加name才能计算出锚的数目

4.返回文档中第一个锚的文本

语法：document.anchors[0].innerHTML

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

运行结果：
这里写图片描述

5.返回文档中表单的数目

语法：document.forms.length

<form name="Form1"></form>
<form name="Form2"></form>
<form></form>

<p>表单数目:
<script>
   document.write(document.forms.length);
</script>
</p>

运行结果：
这里写图片描述

6.返回文档中第一个表单的名字

语法：document.forms[0].name

<form name="Form1"></form>
<form name="Form2"></form>
<form></form>

<p>第一个表单名称:
<script>
   document.write(document.forms[0].name);
</script>
</p>

运行结果：
这里写图片描述

７.返回文档中的图像数

语法：document.images.length

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

运行结果：
这里写图片描述

８.返回文档中第一个图像的id

语法：document.images[0].id

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

运行结果：
这里写图片描述

９.返回文档中的链接数

语法：document.links.length

<p><a href="#">JavaScript 教程</a></p>
<p><a href="#">JavaScript 教程</a></p>
<p><a href="#">JavaScript 教程</a></p>
<p><a href="#">JavaScript 教程</a></p>

<p>链接数目:
<script>
   document.write(document.links.length);
</script>
</p>

运行结果：
这里写图片描述

注：链接必须加href才能计算出链接数

10.返回文档中的第一个链接的id

语法：document.links[0].id

<p><a id="one" href="#">JavaScript 教程</a></p>
<p><a id="two" href="#">JavaScript 教程</a></p>
<p><a id="three" href="#">JavaScript 教程</a></p>

<p>第一个链接的ID：
<script>
   document.write(document.links[0].id);
</script>
</p>

运行结果：
这里写图片描述

11.返回文档中的所有cookies的名称/值对

语法：document.cookie

与此文档相关的Cookies: 
<script>
   document.write(document.cookie);
</script>

运行结果：
这里写图片描述

12.返回加载的文档的服务器域名

语法：document.domain

加载这个文件的域名:
<script>
   document.write(document.domain);
</script>

运行结果：
这里写图片描述

13.返回文档的最后一次修改时间

语法：document.lastModified

文档最后修改时间:
<script>
   document.write(document.lastModified);
</script>

运行结果：
这里写图片描述

14.返回加载的当前文档的URL

语法：document.referrer

当前文档的引用地址:
<script>
   document.write(document.referrer);
</script>

运行结果：
这里写图片描述

15.返回文档的标题

语法：document.title

文档的标题为: 
<script>
   document.write(document.title);
</script>

运行结果：
这里写图片描述

16.返回文档的完整的URL

语法：document.URL

文档的完整的URL: 
<script>
   document.write(document.URL);
</script>

运行结果：
这里写图片描述

17.打开输出流，向流中输入文本

    var doc=document.open("text/html","replace");        //打开输出流
    var txt="<!DOCTYPE html><html><body>学习 HTML DOM 很有趣!</body></html>";   //定义文本
    doc.write(txt);     //向流中输入文本

18.write() 和 writeln()的不同

write()方法不会在每个语句后面新增一行
writeIn()方法在每个语句后面新增一行

   writeIn(xxx) = write(xxx+"<br>")

19.用指定的ID弹出一个元素的innerHTML

<h1 id="myHeader" onclick="getValue()">点击我!</h1>

<script>
function getValue(){
  var x=document.getElementById("myHeader");
  alert(x.innerHTML);
}
</script>

运行结果：
这里写图片描述

20.用指定的Name弹出元素的数量

语法：alert(document.getElementsByName(“名字”).length);

猫:
<input name="x" type="radio" value="猫">
狗:
<input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名称为 'x'的元素?">

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

运行结果：
这里写图片描述

21.用指定的tagname弹出元素的数量

语法：alert(document.getElementsByTagName(“标签名”).length);

<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元素?">

<script>
function getElements(){
  var x=document.getElementsByTagName("input");
  alert(x.length);
}
</script>