Document对象

来源:互联网 发布:零基础学油画知乎 编辑:程序博客网 时间:2024/06/08 09:49

Document对象

document.writeln()将内容添加到HTML文档的末尾。document.write()类似,但不会给添加到文档里的字符串附上行结束字符。
document.URL属性返回当前文档的URL。

获取文档信息

属性 说明 返回 characterSet 返回文档的字符集编码,是一个只读属性 字符串 charset 获取或设置文档的字符串编码 字符串 compatMode 获取文档的兼容性模式 字符串 defaultCharset 获取浏览器所使用的默认字符编码 字符串 dir 设置或获取文档的文本方向 字符串 domain 设置或获取当前文档的域名 字符串 lastModified 返回文档的最后修改时间(如果修改时间不可用则返回当前时间) 字符串 referrer 返回链接到当前文档的文档URL(就是对应HTTP标头的值) 字符串 title 获取或设置当前文档的标题 字符串

如下的代码:

<script>    document.writeln("<pre>");    document.writeln("characterSet: " + document.characterSet);    document.writeln("charset: " + document.charset);    document.writeln("compatMode: " + document.compatMode);    document.writeln("defaultCharset: " + document.defaultCharset);    document.writeln("dir: " + document.dir);    document.writeln("domain: " + document.domain);    document.writeln("lastModified: " + document.lastModified);    document.writeln("referrer: " + document.referrer);    document.writeln("title: " + document.title);    document.write("</pre>");</script>

其结果为:

characterSet: UTF-8charset: UTF-8compatMode: CSS1CompatdefaultCharset: undefineddir: domain: localhostlastModified: 04/06/2017 16:49:07referrer: title: xxxx

compatMode属性的值

  • CSS1Compat此文档遵循某个有效的HTML规范(但不必是HTML5,有效的HTML4文档也会返回这个值)
  • BackCompat此文档含有非标准的功能,已触发兼容模式

使用location对象

document.location属性返回一个Location对象,可以获取文档地址信息,也允许你导航到其他文档上。

属性 说明 返回 href 获取或设置当前文档的地址 字符串 protocol 获取或设置文档URL的协议部分 字符串 host 获取或设置文档URL的主机和端口部分 字符串 hostname 获取或设置文档URL的主机名部分 字符串 port 获取或设置文档URL的端口部分 字符串 pathname 获取或设置文档URL的路径部分 字符串 search 获取或设置文档URL的查询(问号串)部分 字符串 hash 获取或设置文档URL的锚(问号串)部分 字符串

如下的代码:

<script>    document.writeln("<pre>");    document.writeln("href: " + document.location.href);    document.writeln("protocol: " + document.location.protocol);    document.writeln("host: " + document.location.host);    document.writeln("hostname: " + document.location.hostname);    document.writeln("port: " + document.location.port);    document.writeln("pathname: " + document.location.pathname);    document.writeln("search: " + document.location.search);    document.writeln("hash: " + document.location.hash);    document.write("</pre>");</script>

其结果为:

href: http://localhost:63342/OA/test/document.html?query=abc#demoprotocol: http:host: localhost:63342hostname: localhostport: 63342pathname: /OA/test/document.htmlsearch: ?query=abchash: #demo

通常通过href属性来导航到其它文档,但也可以通过Location对象定义的一些方法来实现。

  • assign()导航到指定的URL
  • replace()清除当前文档并导航到URL所指定的那个文档
  • reload()重新载入当前的文档
  • resolveURL()将指定的相对URL解析成绝对URL

如下

        <script>            document.getElementById("pressme").onclick = function () {                document.location.assign("http://baidu.com");            };        </script>

读取和写入cookie

读取cookie属性值时会得到与文档相关的所有的cookiecookie是形式为name=value的名称/值对。如果存在多个cookie,那么cookie属性会把它们一起作为结果返回,之间以分号相隔。

如下:

<script>    var cookieCount = 0;    document.getElementById("update").onclick = updateCookie;    document.getElementById("write").onclick = createCookie;    readCookies();    function readCookies(){        document.getElementById("cookiedata").innerHTML = document.cookie;    }    function createCookie() {        cookieCount++;        document.cookie = "Cookie_"+cookieCount+"=Value_"+cookieCount;        readCookies();    }    function updateCookie(){        document.cookie = "Cookie_"+cookieCount+"=Updated_"+cookieCount;        readCookies();    }</script>

其结果为:

Cookie_1=Value_1; Cookie_2=Value_2; Cookie_3=Updated_3; Cookie_4=Updated_4

浏览器中显示如下:

浏览器中显示

还可以在cookie中添加额外的字段来改变cookie的处理方式

额外项 说明 path=<path> 设置cookie关联的路径,如果没有指定则默认使用当前的文档路径 domain=<domain> 设置cookie关联的域名,如果没有指定则默认使用当前文档的域名 max-age=<seconds> 设置cookie的有效值,以秒的形式从它创建之时起开始计算 expires=<date> 设置cookie的有效值,用的是GMT格式的日期 secure 只有在安全(HTTPS)连接时才会发送cookie

理解就绪状态

document.readyState属性提供了加载和解析HTML文档过程中当前处于哪个阶段的信息。在默认情况下浏览器会在遇到文档里的script元素时立刻开始执行脚本。

readyState属性返回的值:

  • loading浏览器正在加载和处理此文档
  • interactive文档已被解析,但浏览器还在加载其中链接的资源(图像和媒体文件等)
  • complete文档已被解析,所有的资源也已加载完毕

获取DOM的实现情况

document.implementation属性向你提供了浏览器对DOM功能的实现信息。

获取HTML元素对象

使用属性获取元素对象

Document提供了一组属性,会返回代表文档中特定元素或元素类型的对象。

属性 说明 返回 activeElement 返回一个代表当前带有键盘焦点元素的对象 HTMLElement body 返回一个代表body元素的对象 HTMLElement Embeds plugins 返回所有代表embed元素的对象 HTMLCollection forms 返回所有代表form元素的对象 HTMLCollection head 返回一个代表head元素的对象 HTMLHeadElement images 返回所有代表img元素的对象 HTMLCollection links 返回所有代表文档里具备href属性的a和area元素的对象 HTMLCollection scripts 返回所有代表script元素的对象 HTMLCollection

还可以使用数组风格的标记来获取代表某个已命名元素(named element)的对象。它指的是带有idname属性的元素。

0 0