1什么是dom

DOM--文档对象模型；dom可以以一种独立于平台和语言的方式访问和修改一格文档的内容和结构

DOM 是 W3C（万维网联盟）的标准。

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

dom的级别

1级dom--DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。

2级dom--过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持

dom优点和缺点：

优势：易用性强，遍历简单

缺点：效率低，解析速度慢，内存占用量过高，对于大文件不可以使用！消耗时间久，DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

解决方案：

DOM访问和操作是现代网页应用中很重要的一部分。但每次你通过“桥梁”从ECMAScript到DOM时，都会被收取“过路费”。为减少DOM编程中的性能损失！

一.最小号dom访问在js端做精可能多的是

function innerHTMLLoop2() { var content = ''; for (var count = 0; count < 15000; count++) { content += 'a';

} document.getElementById('here').innerHTML += content;}

二。在反复访问的地方使用局部变量存放DOM引用。

三。小心地处理HTML集合，因为他们表现出“存在性”，总是对底层文档重新查询。将集合length属性缓存到一个变量中，在迭代中使用这个变。如果经常操作这个集合，可以将集体拷贝到数组中。

四。可能的话，使用速度更快的API，诸如querySelectorAll()和firstElementChild。

下列浏览器支持选择器API：Internet Explorer 8，Firefox 3.5，Safari 3.1，Chrome 1，Opera

五。注重重绘和重排版：批量修改风格，离线操作DOM树，缓存并减少对布局信息的访问。

)批量修改

重排版和重绘代价昂贵，所以，提高程序响应速度一个好策略是减少此类操作发生的机会。为减少发生

次数，你应该将多个DOM 和风格改变合并到一个批次中一次性执行。

六。动画中使用绝对坐标，使用拖放代理。

七。使用事件托管技术最小化事件句柄数量。

2.dom tree--

1用来与html等网络文档元素交互而引入的提供API

2. DOMtree不是网页浏览器必要的，而是为了jsp而做的。（如果没有jsp，可以不需要建立DOMtree也能渲染整个页面）

3,节点的属性

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型节点类型元素1属性2文本3注释8文档9

4.元素对象的方法和属性相关的方法

Js节点属性与方法

属性：

Attributes 存储节点的属性列表(只读)
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition 以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)
nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)
parentNode 返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)
url 返回最近载入的XML文档的URL(只读)
Xml 返回节点及其后代的XML表示(只读)
nextSibling 返回相领的节点

方法：

appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
cloneNode 返回当前节点的拷贝
createAttribute 创建新的属性
createCDATASection 创建包括给定数据的CDATA段
createComment 创建一个注释节点
createDocumentFragment 创建DocumentFragment对象
createElement 创建一个元素节点
createEntityReference 创建EntityReference对象
createNode 创建给定类型,名字和命名空间的节点
createPorcessingInstruction 创建操作指令节点
createTextNode 创建包括给定数据的文本节点
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回当前节点是否有子节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的XML文档
loadXML 导入指定字符串的XML文档
removeChild 从子结点列表中删除指定的子节点
replaceChild 从子节点列表中替换指定的子节点
Save 把XML文件存到指定节点
selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换
transformNodeToObject 使用指定的样式表将节点及其后代转换为对象

5.访问节点：--通过不同的方法查找希望操作的元素

document.getaELementById(id)

document.getElementsByTagName()

document.getElementsByName();

document.getElementsByClassName();

document.querySelector
document.querySelectorAll 优点是查找快，缺点兼容性差

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

querySelector 和 querySelectorAll 方法很好用，可惜IE6、IE7不支持，怎么让IE6、IE7也支持querySelectorAll和querySelector这两个方法呢，

DOM2级样式规范为style定义了一些属性和方法

属性或方法

说明

cssText

访问或设置style中的CSS代码

length

CSS属性的数量

parentRule

CSS信息的CSSRule对象

getPropertyCSSValue(name)

返回包含给定属性值的CSSValue对象

getPropertyPriority(name)

如果设置了!important，则返回，否则返回空字符串

item(index)

返回指定位置CSS属性名称

removeProperty(name)

从样式中删除指定属性

setProperty(name,v,p)

给属性设置为相应的值，并加上优先权

DOm的知识总结