dom文档对象模型

定义

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点，数据和方法，另外也有与其他节点存在某种关系。节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

节点类型

一、Node类型
1.定义
javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。
2.属性和方法
节点信息相关属性
Node.prototype.nodeType
Node.prototype.nodeName
Node.prototype.nodeValue
层次结构相关属性
Node.prototype.childNodes
Node.prototype.firstChild
Node.prototype.lastChild
Node.prototype.nextSibling
Node.prototype.parentNode
Node.prototype.parentElement
Node.prototype.ownerDocument
方法
是通过父节点对象来调用
Node.prototype.appendChild(child)
Node.prototype.insertBefore(new,ref)
Node.prototype.removeChild(child)
Node.prototype.replaceChild(new,old)
Node.prototype.cloneNode([boolean])
参数为true，表示除了克隆当前对象，还克隆子元素

二、Document类型
1.定义
javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。
2.属性和方法
属性
Document.prototype.body
Document.prototype.forms
Document.prototype.images
Document.prototype.charset
Document.prototype.doctype
方法：
元素节点查询
document.getElementById();
document.getElementsByName();
document.getElementsByClassName();
document.getElementsByTagName();
document.querySelector();
返回第一个匹配element
document.querySelectorAll();
返回所有匹配element
节点创建
createElement()
三、Element类型
1.特点
所有的HTML元素都由HTMLElement类型表示，或者其子类型表示。
2.属性和方法
元素节点属性（Element）
Element.prototype.children
Element.prototype.firstElementChild
Element.prototype.lastElementChild
Element.prototype.nextElementSibling
Element.prototype.parentElement

innerText
向当前元素内部添加文本节点
innerHTML
向当前元素内部添加HTML代码片段（str解析标签）
style
获取或者设置样式
方法
getAttribute(key)
getAttributeNames()
setAttribute(key,val)
四、Text类型
1.属性和方法
Text.prototype.xxx

文本节点。包含的是可以按照字面解释的纯文本内容。
length
文本长度
appendData(text)
追加文本
deleteData(beginIndex,count)
删除文本
insertData(beginIndex,text)
插入文本
replaceData(beginIndex,count,text)
替换文本
splitText(beiginIndex)
从beginIndex位置将当前文本节点分成两个文本节点
substringData(beiginIndex,count)
从beginIndex开始提取count个子字符串
document.createTextNode()
创建文本节点，参数为要插入节点中的文本
五、Comment类型： 注释类型

<div id = "myDiv"><!--a comment--></div>
<!--a comment--> Comment类型