HTML DOM

1. 介绍

1.1 DOM概念

　　说明：DOM全称 Document Object Model，即文档对象模型。将文档抽象成一个树型结构，文档中的标签、标签属性或标签内容可以表示为树上的结点。

1.2 DOM分类

　　W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

1.3 HTML DOM

　　HTML DOM 定义了访问和操作 HTML 文档的标准。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

1.4 HTML DOM树

2. HTML DOM 节点属性

2.1 innerHTML：以HTML代码格式获取或设置节点的内容

　　以HTML格式赋值给innerHTML属性时，会以HTML的形式呈现。比如：node.innerHTML="<input type='button' value='按钮' />" 将会显示一个按钮。

2.2 innerText：获取或设置节点的文本内容

　　以文本字符串的形式获取或设置节点的内容。

2.3 nodeName：获取节点名称，只读属性

• 元素节点的 nodeName 与标签名相同（标签名大写）
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

2.4 nodeValue：获取或设置节点的值

• 元素节点和文档节点的 nodeValue 是 undefined 或 null，只读
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

2.5 nodeType：返回节点类型，只读属性

　　

3. HTML DOM 访问

• getElementById(id) ：获取指定ID的元素，如果没有指定的ID，返回undefined。
• getElementsByName(name) ：返回一个包含指定name名称的的元素集合。
• getElementsByClassName(className) ：返回一个包含指定class名称的的元素集合。getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
• getElementsByTagName(elementName) ：返回一个指定标签名称的的元素集合。

4. DOM节点操作

4.1 访问节点

element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.childNodes	返回元素子节点的 NodeList。在标准浏览器回车键（文本节点）也是一个子节点，在IE8及其一下回车键不计算为子节点。
element.children	返回元素子节点的 NodeList。（只包含元素节点）
element.firstChild	返回元素的首个子节点（包含文本节点）。在标准浏览器包含文本类型节点，在非标准浏览器（IE6~8）下，只包含元素节点（有兼容性问题）IE6~8下使用该属性。 兼容写法：var elem = element.firstElementChild || element.firstChild;
element.firstElementChild	返回元素的第一个元素节点不包含文本类型的子节点，标准浏览器使用该属性。此方法在IE6~8返回undefined。
element.lastChild	返回元素的最后一个子节点，兼容性同firstChild
element.lastElementChild	返回元素的最后一个元素子节点
element.nextSibling	返回元素的下一个兄弟节点
element.nextElementSibling	返回元素的下一个兄弟元素节点
element.previousSibling	返回元素的上一个兄弟节点
element.previousElementSibling	返回元素的上一个兄弟元素节点
element.parentNode	parentNode 属性以 Node 对象的形式返回指定节点的父节点。如果指定节点没有父节点，则返回 null。
element.offsetParent	返回最近的父级定位元素，如果没有定位父级，则默认为body。
element.attributes	返回元素的属性集合NamedNodeMap
element.setAttribute(属性名,值)	添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
element.getAttribute(属性名)	获取指定属性的值
element.removeAttribute(属性名)	删除指定的属性

4.2 节点操作

document.createElement()	创建元素节点   var lis = document.createElement("li");
document.createTextNode()	创建文本节点   var textNode = document.createTextNode("aaa");
父级.appendChild(子节点)	给一个元素添加子节点，放在最后
父级.insertBefore(子节点,在谁之前)	在已有的子节点前插入一个新的子节点，兼容性问题IE8一下，父级没有子节点时，IE8及其以下会报错。
父级.removeChild(子节点)	删除父元素中的子节点
复制的节点.cloneNode(false|false)	复制的节点.cloneNode(false) -->复制当前节点，复制的节点.cloneNode(true) -->复制当前节点及其子节点。
父节点.replaceChild(新插入的节点，要替换的节点)	替换当前父节点中的指定子节点