DOM - document
一、DOM
dom 是文档在内存中的表现形式,它是一个应用程序接口,定义了该文档的逻辑结构以及一套访问和处理文档的方法。应用程序要处理文档都要将HTML或者XML转换为dom。
HTML中的元素转化为DOM文档中的节点对象, DOM的节点类型:document element comment type text. 其中 document是根节点。
1.HTML DOM 和核心DOM 的区别
HTML DOM 提供了大量遍历的方法和属性,都是在核心DOM上修改来的
2.document 对象
window.document 是用来返回一个document 对象。
document 的属性
location URL domain cookie lastModified charset readyState ( 其中 location cookie readyState比较重要, )
2.1 location
返回location 对象
2.2 cookie
用document.cookie返回的是一个字符串,字符串中有cookie的名称,有效期,范围,域, 通信协议为加密。
格式: document.cookie="name=value;expires=DATE; path=PATH; domain=SOMAIN_NAME;secure";
name:表示cookie的名称 value 表示cookie的值, expires表示 时间期限, path 表示能够访问cookie的路径,domain表示能够访问cookie的域 。
获取cookie
用document.cookie 获得cookie, 获得一个字符串,让后可以通过split(";")将字符串中的键值对分开 获得相应的数值。
setCookie
设置字符串的值,组成一个字符串 然后将字符串赋值给document.cookie.
deleteCookie
删除cookie的策略是将cookie的有效期设置为过期的。
2.3 检查文档状态
document.readyState可以查看当前文档的变化,当文档变化后就会触发readystatechange事件。
文档加载的过程依次会经历 loading interactive complete 。在文档加载阶段 javascript就开始运行的,所以有时候需要检查文档是否加载完毕
(1)window.load 事件
当文档加载完毕后会触发window.load事件 定义相关的处理函数
(2)document.readystatechange 事件
定义处理函数 查看当前的document.readyState是否到complete状态 再完成相应程序。
2.4 document.open document.open()方法可以打开一个新窗口 并加装一个新的文档,与window.open()方法相投,但是document.open返回的是一个document对象,是对新窗口中的文档的引用;而windown返回的是一个window.open对象,是对一个新的窗口的引用。
document.close()方法是不可以关闭窗口,只可以关闭文档流。必须使用window.close。
2.5 向网页中写入内容
使用document.write()和document.writeln() 可以将指定的字符串写到当前的文档中显示,字符串也可以包含HTML标签。
两者的区别是:是否有换行;
当用这个方法后,如果使用document.close可以让写入的内容呈现在网页上,但是也不是必须的。
必须的时候:
(1)在使用open方法打开一个新窗口并向其中写入内容,而且不是第一次对该窗口使用open方法。
(2)如果这两个写入方法位于事件处理函数中,必须使用document.close()方法关闭写入流。
2.6 文档可以编辑
使用document.designMode属性="on"表示整个文档处于编辑状态,
使用document.body.contenteditable="on" 表示所有元素处于编辑状态。
2.7焦点管理
用户可以使用很多方法处理文档的焦点,例如可以使用window.blur() 和 window.focus() 也可以对任何元素使用blur()和focus()方法。
在html5zhong 除了以上方法处理焦点,还可以使用document.activeElement // 返回当前焦点所在的元素,如果不在任何元素上 那么返回body 元素。documnet.hasFocus()方法 // 可以检测焦点是否在文档内。 document.defaultView 返回活动文档的window对象。
2.8 编辑API
document.execCommand(commandId, showUI ,value)方法可以执行这些命令
第一个参数是指定的动作,后面两个参数可以影响这个动作的执行。这些命令可以修改字体加粗 倾斜 颜色等等。
eg:document.execCommand("false",false,choice.value);