DOM——文档对象模型基础部分

概念

文档对象模型（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 属性：

1. innerHTML - 节点（元素）的文本值
2. parentNode - 节点（元素）的父节点
3. childNodes - 节点（元素）的子节点
4. 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)