[前端] DOM对象属性及cookie定义

DOM的含义

DOM是文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口,以达到使用编程语言操作文档的目的(比如增删内容)。所以,DOM可以理解成文档(HTML文档、XML文档和SVG文档)的编程接口。

DOM有自己的国际标准,目前的通用版本是DOM 3,下一代版本DOM 4正在拟定中。本章介绍的就是JavaScript对DOM标准的实现和用法。

严格地说,DOM不属于JavaScript,但是操作DOM是JavaScript最常见的任务,而JavaScript也是最常用于DOM操作的语言。所以,DOM往往放在JavaScript里面介绍。

document对象概述

document对象是文档的根节点,每张网页都有自己的document对象。window.document属性就指向这个对象。也就是说,只要浏览器开始载入HTML文档,这个对象就开始存在了,可以直接调用。

document对象有不同的办法可以获取。

  • 对于正常的网页,直接使用document或window.document。
  • 对于iframe载入的网页,使用iframe节点的contentDocument属性。
  • 对Ajax操作返回的文档,使用XMLHttpRequest对象的responseXML属性。
  • 对于某个节点包含的文档,使用该节点的ownerDocument属性。

上面这四种document对象,都部署了Document接口,因此有共同的属性和方法。当然,各自也有一些自己独特的属性和方法,比如HTML和XML文档的document对象就不一样。

document对象的属性

document对象有很多属性,用得比较多的是下面这些。

doctype,documentElement,defaultView,body,head,activeElement

以下属性指向文档内部的某个节点。

(1)doctype

对于HTML文档来说,document对象一般有两个子节点。第一个子节点是document.doctype,它是一个对象,包含了当前文档类型(Document Type Declaration,简写DTD)信息。对于HTML5文档,该节点就代表<!DOCTYPE html>。如果网页没有声明DTD,该属性返回null。另外,document.firstChild通常就返回这个节点。

var doctype = document.doctype;

doctype // "<!DOCTYPE html>"
doctype.name // "html"

(2)documentElement

第二个子节点是document.documentElement,表示当前文档的根节点(root)。对于HTML网页,该属性返回html节点,代表<html lang="en">。

(3)defaultView

defaultView属性,在浏览器中返回document对象所在的window对象,否则返回null。

var win = document.defaultView;

(4)body

body属性返回当前文档的body或frameset节点,如果不存在这样的节点,就返回null。这个属性是可写的,如果对其写入一个新的节点,会导致原有的所有子节点被移除。

(4)head

head属性返回当前文档的head节点。如果当前文档有多个head,则返回第一个。

document.head === document.querySelector("head") 

(5)activeElement

activeElement属性返回当前文档中获得焦点的那个元素。用户通常可以使用tab键移动焦点,使用空格键激活焦点,比如如果焦点在一个链接上,此时按一下空格键,就会跳转到该链接。

documentURI,URL,domain,lastModified,location,referrer,title,characterSet

以下属性返回文档信息。

(1)documentURI,URL

documentURI属性和URL属性都返回当前文档的网址。不同之处是documentURI属性是所有文档都具备的,URL属性则是HTML文档独有的。

(2)domain

domain属性返回当前文档的域名。比如,某张网页的网址是 http://www.example.com/hello.html,domain属性就等于 www.example.com 。如果无法获取域名,该属性返回null。

var badDomain = "www.example.xxx";

if (document.domain === badDomain)
  window.close();

上面代码判断,如果当前域名等于指定域名,则关闭窗口。

二级域名的情况下,domain属性可以设置为对应的一级域名。比如,当前域名是sub.example.com,则domain属性可以设置为example.com。除此之外的写入,都是不可以的。

(3)lastModified

lastModified属性返回当前文档最后修改的时间戳,格式为字符串。

document.lastModified
// Tuesday, July 10, 2001 10:19:42

注意,lastModified属性的值是字符串,所以不能用来直接比较,两个文档谁的日期更新,需要用Date.parse方法转成时间戳格式,才能进行比较。

if (Date.parse(doc1.lastModified) > Date.parse(doc2.lastModified)) {
  // ...
}

(4)location

location属性返回一个只读对象,提供了当前文档的URL信息。

// 假定当前网址为http://user:passwd@www.example.com:4097/path/a.html?x=111#part1

document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

// 跳转到另一个网址
document.location.assign('http://www.google.com')
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载(默认值)
document.location.reload(false)
// 跳转到另一个网址,但当前文档不保留在history对象中,
// 即无法用后退按钮,回到当前文档
document.location.assign('http://www.google.com')
// 将location对象转为字符串,等价于document.location.href
document.location.toString()

虽然location属性返回的对象是只读的,但是可以将URL赋值给这个属性,网页就会自动跳转到指定网址。

document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';

document.location属性与window.location属性等价,历史上,IE曾经不允许对document.location赋值,为了保险起见,建议优先使用window.location。如果只是单纯地获取当前网址,建议使用document.URL。

(5)referrer

referrer属性返回一个字符串,表示前文档的访问来源,如果是无法获取来源或是用户直接键入网址,而不是从其他网页点击,则返回一个空字符串。

(6)title

title属性返回当前文档的标题,该属性是可写的。

document.title = '新标题';

(7)characterSet

characterSet属性返回渲染当前文档的字符集,比如UTF-8、ISO-8859-1。

readyState,designModed

以下属性与文档行为有关。

(1)readyState

readyState属性返回当前文档的状态,共有三种可能的值,加载HTML代码阶段(尚未完成解析)是“loading”,加载外部资源阶段是“interactive”,全部加载完成是“complete”。

(2)designModed

designMode属性控制当前document是否可编辑。通常会打开iframe的designMode属性,将其变为一个所见即所得的编辑器。

iframe_node.contentDocument.designMode = "on";

implementation,compatMode

以下属性返回文档的环境信息。

(1)implementation

implementation属性返回一个对象,用来甄别当前环境部署了哪些DOM相关接口。implementation属性的hasFeature方法,可以判断当前环境是否部署了特定版本的特定接口。

document.implementation.hasFeature( 'HTML, 2.0 )
// true

document.implementation.hasFeature('MutationEvents','2.0')
// true

上面代码表示,当前环境部署了DOM HTML 2.0版和MutationEvents的2.0版。

(2)compatMode

compatMode属性返回浏览器处理文档的模式,可能的值为BackCompat(向后兼容模式)和 CSS1Compat(严格模式)。

anchors,embeds,forms,images,links,scripts,styleSheets

以下属性返回文档内部特定元素的集合(即HTMLCollection对象,详见下文)。这些集合都是动态的,原节点有任何变化,立刻会反映在集合中。

(1)anchors

anchors属性返回网页中所有的a节点元素。注意,只有指定了name属性的a元素,才会包含在anchors属性之中。

(2)embeds

embeds属性返回网页中所有嵌入对象,即embed标签,返回的格式为类似数组的对象(nodeList)。

(3)forms

forms属性返回页面中所有表单。

var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];

上面代码获取指定表单的指定元素。

(4)images

images属性返回页面所有图片元素(即img标签)。

var ilist = document.images;

for(var i = 0; i < ilist.length; i++) {
  if(ilist[i].src == "banner.gif") {
    // ...
  }
}

上面代码在所有img标签中,寻找特定图片。

(4)links

links属性返回当前文档所有的链接元素(即a标签,或者说具有href属性的元素)。

(5)links

scripts属性返回当前文档的所有脚本(即script标签)。

(6)styleSheets

styleSheets属性返回一个类似数组的对象,包含了当前网页的所有样式表。该属性提供了样式表操作的接口。然后,每张样式表对象的cssRules属性,返回该样式表的所有CSS规则。这又方便了操作具体的CSS规则。

var allSheets = [].slice.call(document.styleSheets);

上面代码中,使用slice方法将document.styleSheets转为数组,以便于进一步处理。

cookie属性返回当前网页的cookie。该属性是可写的,但是一次只能写入一个cookie,也就是说写入并不是单纯的覆盖,JavaScript内部会对其进行处理。

document.cookie = "test1=hello";
document.cookie = "test2=world";

document.cookie
// test1=hello;test2=world

cookie的值可以用encodeURIComponent方法进行处理,对逗号、分号、空格进行转义(这些符号都不允许作为cookie的值)。

除了cookie本身的内容,还有一些可选的属性也是可以写入的,它们都必须以分号开头。

  • ;path=path,指定路径,必须是绝对路径(比如'/','/mydir'),如果未指定,默认为当前路径。
  • ;domain=domain,指定域名,比如'example.com','.example.com'(这种写法将对所有子域名生效)、'subdomain.example.com'。如果未指定,默认为当前域名。
  • ;max-age=max-age-in-seconds,指定cookie有效期,比如60*60*24*365(即一年31536e3秒)。
  • ;expires=date-in-GMTString-format,指定cookie过期时间,日期格式等同于Date.toUTCString()的格式。
  • ;secure,指定cookie只能在加密协议https下发送。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值