zoukankan      html  css  js  c++  java
  • HTML中 DOM操作的Document 对象详解(收藏)

    Document 对象
    Document 对象代表整个HTML 文档,可用来访问页面中的所有元素。
    Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访问。

    Document 对象的集合:
    (1)all[]:all 集合返回对文档中所有 HTML 元素的引用。
    语法:

    document.all[i]
    document.all[name]
    document.all.tags[tagname]

    说明:
    第一:all[] 是一个多功能的类似数组的对象,它提供了对文档中所有 HTML 元素的访问。
    第二:all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。
    (2)anchors[]:anchors 集合可返回对文档中所有 Anchor 对象的引用。
    语法:

    document.anchors[]

    举例如下:

    复制代码
    <html>
    <body>
    <a name="first">First anchor</a><br />
    <a name="second">Second anchor</a><br />
    <a name="third">Third anchor</a><br />
    <br />
    Number of anchors in this document:
    <script type="text/javascript">
    document.write(document.anchors.length)
    </script>
    </body>
    </html>
    复制代码

    (3)forms[]:返回对文档中所有 Form 对象的引用。
    语法:

    document.forms[]

    举例如下:

    复制代码
    <html>
    <body>
    <form name="Form1"></form>
    <form name="Form2"></form>
    <form name="Form3"></form>
    <script type="text/javascript">
    document.write("This document contains: ")
    document.write(document.forms.length + " forms.")
    </script>
    </body>
    </html>
    复制代码

    输出结果:This document contains: 3 forms. 
    (4)images[]:返回对文档中所有 Image 对象的引用。
    语法:

    document.images[]

    举例如下:

    复制代码
    <html>
    <body>
    <img border="0" src="hackanm.gif" width="48" height="48"><br />
    <img border="0" src="compman.gif" width="107" height="98"><br />
    <script type="text/javascript">
    document.write("This document contains: ")
    document.write(document.images.length + " images.")
    </script>
    </body>
    </html>
    复制代码

    输出结果:This document contains: 2 images.
    (5)links[]:返回对文档中所有 Area 和 Link 对象的引用。
    语法:

    document.links[]


    Document 对象的属性:
    (1)body:提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
    (2)cookie :可设置或查询与当前文档相关的所有 cookie。
    语法:

    document.cookie

    说明:该属性是一个可读可写的字符串,可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
    (3)domain:可返回下载当前文档的服务器域名。
    语法:

    document.domain

    说明:该属性是一个只读的字符串,包含了载入当前文档的 web 服务器的主机名。
    (4)lastModified:返回文档最后被修改的日期和时间。
    语法:

    document.lastModified

    说明:该值来自于 Last-Modified HTTP 头部,它是由 Web 服务器发送的可选项。
    (5)referrer:返回载入当前文档的文档的 URL。
    语法:

    document.referrer

    说明:如果当前文档不是通过超级链接访问的,则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
    (6)title:返回当前文档的标题。
    语法:

    document.title

    (7)URL:返回当前文档的 URL。
    语法:

    document.URL

    说明:一般情况下,该属性的值与包含文档的 Window 的 location.href 属性相同。不过,在 URL 重定向发生的时候,这个 URL 属性保存了文档的实际 URL,而 location.href 保存了请求的 URL。

    Document 对象的方法:
    (1)close():关闭用 document.open() 方法打开的输出流,并显示选定的数据。
    语法:

    document.close()

    说明:该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
    (2)getElementById():返回对拥有指定 id 的第一个对象的引用。
    说明:HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
    举例1:

    复制代码
    <html>
    <head>
    <script type="text/javascript">
    function getValue()
      {
      var x=document.getElementById("myHeader");
      alert(x.innerHTML);
      }
    </script>
    </head>
    <body>
    <h1 id="myHeader" onclick="getValue()">这是一个标题</h1>
    <p>点击标题弹出消息框</p>
    </body>
    </html>
    复制代码

    举例2:定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了。

    function id(x) {
      if (typeof x == "string") return document.getElementById(x);
      return x;
      }

    上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。
    (3)getElementsByName():返回带有指定名称的对象集合。
    语法:

    document.getElementsByName(name)

    说明:该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。另外因为一个文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    (4)getElementsByTagName():返回带有指定标签名的对象集合。
    语法:

    document.getElementsByTagName(tagname)

    说明:getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
    注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
    比如:var x=document.getElementsByTagName("input");//<input name="myInput" type="text" size="20" />

    可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表:
    比如:获取文档中所有的表

    var tables = document.getElementsByTagName("table");
    alert ("This document contains " + tables.length + " tables");

    也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
    比如:获得文档中的第四个段落。

    var myParagragh = document.getElementsByTagName("p")[3];


    (5)open():打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
    语法:

    document.open(mimetype,replace)

    参数:mimetype:规定正在写的文档的类型。默认值是 "text/html"。replace:当此参数设置后,可引起新文档从父文档继承历史条目。
    说明一:该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写。
    说明二:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。

    (6)write():向文档写 HTML 表达式 或 JavaScript 代码。
    语法:

    document.write(exp1,exp2,exp3,.)

    我们通常按照两种的方式使用 write() 方法:
    一是在使用该方在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中,请务必使用 close() 方法来关闭文档。

    (7)writeln():与 write() 方法作用相同,外加可在每个表达式后写一个换行符。
    注释:在编写 <pre> 标记的内容时,该方法很有用。

    原文链接:https://www.cnblogs.com/codeshark/archive/2008/07/17/1245142.html

  • 相关阅读:
    JMM、asifserial语义、happensbefore模型
    jvm内存溢出实践
    垃圾回收和GC算法
    jvm运行时数据区域
    实现加锁的消费者和生产者模型
    jvm监控工具小结
    HotSpot对象
    java常用垃圾收集器
    字面量, 符号引用与直接引用
    常用线程安全的队列
  • 原文地址:https://www.cnblogs.com/lcspring/p/10635979.html
Copyright © 2011-2022 走看看