Javascript：DOM对象
信息：原创2014-09-150 次阅读0 个评论
标签：后天堂向上，网站制作，自学教程，网站技术，javascript，javascript DOM对象，文档对象模型
基本介绍
DOM：文档对象模型。使用 DOM，开发者可以对 HTML 页面元素（标签）进行访问和操作，比如获取某个元素、增删改查元素内容和属性等等。
需要注意的是，DOM 和 BOM 一样，没有统一的标准，各个浏览器对其支持程度不同，而 IE 是通过 COM 来实现 DOM 的。
DOM 方法
获取节点
| 方法 | 说明 |
|---|---|
| document.getElementById() | 获取指定 ID 的节点（元素） |
| document.getElementsByTagName() | 获取指定 class 的节点集合 |
| document.getElementsByName() | 获取指定 name 的节点集合 |
操作节点属性
| 方法 | 说明 |
|---|---|
| getAttribute(attr) | 获取节点属性的值 |
| setAttribute(attr,value) | 设置节点属性的值 |
| removeAttribute(attr) | 移除节点属性的值 |
实例
HTML：
<p id="greet">hello world!</p>
JS：
var p=document.getElementById("greet");
alert(p.innerHTML);// hello world!
元素节点
节点分为元素节点、属性节点和文本节点。
这些节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue。
| 节点类型 | nodeName | nodeType | nodeValue |
|---|---|---|---|
| 元素节点 | 元素名称 | 1 | null |
| 属性节点 | 属性名称 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
元素节点的属性
html 属性
| 属性 | 说明 |
|---|---|
| tagName | 获取元素节点的标签名 |
| innerHTML | 获取元素节点的内容 |
| id | 获取元素节点的 ID 属性的值 |
| title | 获取元素节点的 title 属性的值 |
| style | 获取元素节点的 style 属性对象 |
| className | 获取元素节点的类名 |
层次节点属性
| 属性 | 说明 |
|---|---|
| parentNode | 获取元素节点的父节点 |
| childNodes | 获取元素子节点的集合（不忽略空白节点） |
| children | 获取元素子节点的集合（忽略空白节点） |
| firstChild | 获取元素子节点的第一个 |
| lastChild | 获取元素子节点的最后一个 |
| nextSibling | 获取元素节点的下一个节点 |
| previousSibling | 获取元素节点的上一个节点 |
| attributes | 获取元素节点的属性集合（遍历的顺序从后至前） |
| ownerDocument | 返回文档本身（document） |
操作元素节点
| 方法 | 说明 |
|---|---|
| createElement() | 创建一个元素节点 |
| createTextNode() | 创建一个文本节点 |
| createAttribute() | 创建一个属性节点 |
| cloneNode() | 克隆元素节点后创建成新的节点 |
| appendChild() | 在元素节点集合的末尾添加新的子节点 |
| removeChild() | 移除元素节点集合中指定的子节点 |
| replaceChild() | 替换元素节点集合中指定的子节点 |
| insertBefore() | 在元素节点的前面添加新的子节点（父元素进行操作） |
DOM 拓展
呈现模式
微软从 IE6 开始区分标准模式和混杂模式（怪异模式），区分方式主要是看文件的声明（!DOCTYPE）。IE 为 document 创建了一个新的属性 compatMode，如果浏览器是标准模式，则返回 CSS1Compat，混杂模式返回BackCompat。
JS 的 DOM 是一个很强大很复杂的内容，以上仅仅是其一部分，如果你有钻研精神，或者你想学习更多相关知识，可以去浏览国外一些优质的网站、书籍，或者去看一下李炎恢老师的视频教程。