概念
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
定义
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
我们一般使用DOM树来直观的表现
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
访问节点
1.var div=document.getElementById(‘Id名’)；
2.var div=document.getElementsByTagName(‘标签名’)；
3.var div=document.getElementsByClassName(‘类名’)；
父节点：
var span=document.getElementByClassName(‘span1’)
console.log(span[0].parentNode)
上一个兄弟节点：
var div2=document.getElementId(‘div2’)
var next1=div2.previousElementSibling
console.log(next1)
子节点：
var box=document.getElementById(‘box’)
console.log(box.childNodes)
console.log(box.children)
console.log(box.children.lenth)
console.log(box.firstChild)
console.log(box.firstElementChild)
console.log(box.lastChild)
console.log(box.lastElementChild)
创建节点：
var li=documnet.createElement(‘li’)
li.innerHTML=‘大家好’
console.log(li)
var ul=document.getElementById(‘list’)
ul.appendChild(li)
移除节点：
var ul=document.getElementById(‘list’)
ul.removeChild(ul.firstElementChild)
var li6=document.getElementById(‘li6’)
ul.removeChild(li6)
移动节点：
var div1=document.getElementById(‘div1’)
var div2=document.getElementById(‘div2’)
div1.appendChild(div2)
替换节点：
var li6=document.getElementById(‘li6’)
var p=document.createElement(‘p’)
li6.parentNode.replaceChild(p,li6)