DOM

Document Object Model（文档对象模型）

DOM是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM树

父、子和同级节点用于描述这种关系。
1、父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。
2、在节点树中，顶端的节点成为根节点
3、根节点之外的每个节点都有一个父节点
4、节点可以有任何数量的子节点
5、叶子是没有子节点的节点
6、同级节点是拥有相同父节点的节点

查找获取节点

查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()（新）
document.querySelector(css选择符)（新）
document.querySelectorAll()（新）
*带有新标识的选择方法仅在IE8(含)+可以使用

改变 HTML

1、在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date()); //不要在文档加载完成之后使用 document.write()。这会覆盖该文档。 2、改变 HTML 内容—修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

Hello World!

document.getElementById("p1").innerHTML="New text!";

3、改变 HTML 属性—如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value

document.getElementById("image").src="landscape.jpg";

改变 CSS

如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style

Hello World!

document.getElementById("p2").style.color="blue";

DOM 事件

onload—事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onchange— 事件常结合对输入字段的验证来使用。
onmouseover—事件可用于在用户的鼠标移至 HTML 元素上方元素时触发函数。
onmouseout—事件可用于在用户的鼠标移至 HTML 元素移出元素时触发函数。
onmousedown—属性在鼠标按钮在元素上按下时触发。点下
onmouseup—事件会在鼠标按键被松开时发生。
onmousemove—事件会在鼠标指针移动时发生。
onclick— 事件会在对象被点击时发生。松开

节点类型&节点关系

节点类型

标签属于节点的一种
节点是包含了标签、注释、文本、doctype等在内的多种组合。

nodeType属性，用于表明节点的类型。

1 Element 代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2 Attr 代表属性 Text, EntityReference
3 Text 代表元素或属性中的文本内容。 None
4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 None
5 EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6 Entity 代表实体。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7 ProcessingInstruction 代表处理指令。 None
8 Comment 代表注释。 None
9 Document 代表整个文档（DOM 树的根节点）。 Element, ProcessingInstruction, Comment, DocumentType
10 DocumentType 向为文档定义的实体提供接口 None
11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12 Notation 代表 DTD 中声明的符号。 None

nodeValue

对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeName 属性含有某个节点的名称。

nodeName

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

节点关系

children：所有是标签类型的子节点
parentNode：获取已知节点的父节点
nextSibling：获取已知节点下一个兄弟节点
previousSibling：获取已知节点上一个兄弟节点
firstChild : 获取元素的首个子节点
lastChild：获取元素的最后个子节点
兼容的firstChild,lastChild,nextSibling,previousSibling写法
在IE下是支持firstChild,lastChild,nextSibling,previousSibling
但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,nextElementSibling,previousElementSibling

常见的节点操作

creatElement

语法：document.creatElement(“元素标签”)
创建元素节点

creatAttrbute

语法：document.creatAttrbute(“元素属性”)
创建属性节点
var att=document.createAttribute(“class”);
att.value=”democlass”;
obj.setAttributeNode(att);
obj.setAttribute(“class”, “att”)

creatTextNode

语法：document.creatTextNode(“文本内容”)
创建文本节点
var otxt=document.createTextNode(“data”);
document.body.appendChild(otxt);

appendChild

语法：appendChild(“所添加的新节点”)
向节点的子节点列表的末尾添加新的子节点

insertBefore

语法：insertBefore(“所添加的新节点，已知子节点”)
在已知的子节点前插入一个新的节点

替换节点

replaceChild
语法：replaceChild(“要插入的新元素”，”将被替换的老元素”)
将某一个子节点替换为另一个

删除节点

removeChild
语法：removeChild(要删除的节点)

常见的属性操作

getAttribute

语法：元素节点.getAttribute(“元素属性名”)
获取元素节点中指定属性的属性值
obj.getAttrbute(“class”)//

setAttribute

语法：元素节点.setAttribute(“属性名”，“属性值”)
创建或改变元素节点的属性

removeAttribute

语法：元素节点.removeAttirbute(“属性名“)
删除元素中的指定属性

获取计算后的样式

currentStyle

ie所支持的获取非行间样式的方法
用法：对象.currentStyle.样式名
例：oDiv.currentStyle.width

getComputedStyle

非ie所支持的获取非行间样式的方法
用法：getComputedStyle(对象，伪类).样式名
例：getComputedStyle(oDiv,null).color

兼容写法

function getStyle(node) {
var style = null;

if(window.getComputedStyle) {
    style = window.getComputedStyle(node, null);
}else{
    style = node.currentStyle;
} 
return style;

}