DOM

一、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);

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

原文地址:https://www.cnblogs.com/xuruweb/p/4209116.html