理解HTML DOM

DOM(Document Object Model)全称文档对象模型。DOM其实是JavaScript操作网页的一套API接口,定义了访问和操作HTML文档的标准。定义了所有HTML元素的对象和属性,以及访问他们的方法。浏览器会根据DOM模型,将结构化文档解析成一系列的节点,再由这些节点组成一个树状结构,所以它的作用是将网页转为一个个节点对象,从而可以用脚本对其进行各种操作获取,修改,添加或删除HTML元素。

1.DOM节点

文档对象是由不同类型的节点对象组成的,所以要操作文档对象,我们得知道有哪些节点对象。节点对象都有一个nodeType属性,通常是由一个数值常量表示

(1)常见的节点对象:

ELEMENT_NODE(1),元素节点对象
ATTRIBUTE_NODE(2),属性节点对象
TEXT_NODE(3),文本节点对象
COMMENT_NODE(8),注释节点对象
DOCUMENT_NODE(9),文档节点对象
DOCUMENT_TYPE_NODE(10),文档类型节点对象
DOCUMENT_FRAGMENT_NODE(11),文档片段节点对象

(2)节点对象之间的关系

整个文档对象,是由不同的节点对象组成,这些节点之间都存在在关系,常见的关系有:

parentNode,父节点
previousSibling,前一个兄弟节点
nextSibling,后一个兄弟节点
firstChild,第一个子节点
lastChild,最后一个字节点
childNodes,子节点集合
ownerDocument, 顶层文档对象,即document对象。
parentElement,返回当前节点的父Element节点

(3)操作节点对象的方法

appendChild(node);向childNodes列表的末尾添加一个节点
insertBefore(newnode,position);往childNodes列表中的某个固定的位置插入一个节点,要是参照节点为null,默认加在末尾
replaceChild(newnode,position)替换某个节点
removeChild(node);删除某个节点
cloneNode(true/false);克隆对象
contains(),接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。
isEqualNode(),
normalize(), 清理当前节点内部的所有Text节点
hasChildNodes()
posted @ 2017-01-13 08:45  叶子陪你玩  阅读(279)  评论(0编辑  收藏  举报