“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。 最初人们把它认为是一种让JavaScript在浏览器间可移植的方法,不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。
W3C DOM 标准被分为 3 个不同的部分:
Core DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
Core DOM:核心DOM
常见的Core DOM方法如下:
1、创建节点 createElement() 方法可创建元素节点。此方法可返回一个 Element 对象。 createTextNode() 可创建文本节点。此方法可返回 Text 对象。
2、复制节点 cloneNode(Boolean) 方法创建节点的拷贝,并返回该副本。
3、插入节点 appendChild() 方法向节点添加最后一个子节点。 insertBefore() 方法在指定的已有子节点之前插入新的子节点。
4、删除节点 removeChild() 方法删除指定元素的某个指定的子节点。
5、替换节点 replaceChild() 方法用新节点替换某个子节点。
6、查找节点 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 hasChildNodes() 方法判断当前元素节点是否拥有子节点。
7、查找、修改、删除节点属性 getAttribute() 方法返回指定属性名的属性值。 setAttribute() 方法创建或改变某个新属性。 removeAttribute() 方法删除指定的属性。
常见的Core DOM属性如下:
nextSibling 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点)。
previousSibling 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点)。
parentNode 属性返回指定节点的父节点。
childNodes 属性返回节点的子节点集合,以 NodeList 对象。
firstChild 属性返回指定节点的首个子节点,以 Node 对象。
lastChild 属性返回被选节点的最后一个子节点。
nodeType 属性返回以数字值返回指定节点的节点类型。
nodeValue 属性设置或返回指定节点的节点值。