文档对象模型

1,DOM文档对象

DOM(Document Object Model) 定义了访问和操作HTML文档的标准方法。

把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。

 

2,DOM节点树

 

文档对象模型

3,节点介绍

每个节点都拥有包含着关于节点某些信息的属性。

这些属性是:

nodeName(节点名称)

nodeValue(节点值)

nodeType(节点类型)

 

 

nodeName(节点名称)

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

 

 

nodeValue(节点值)

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

 

nodeType(节点类型)

nodeType 属性可返回节点的类型。

 

文档对象模型

 

节点的增加

createElement():创建新的元素

createTextNode():创建新的文本节点

appendChild():向节点的子节点列表的末尾添加新的子节点

 

节点的查找

childNodes:找到节点的所有子节点

firstChild:找到节点的第一个子节点(包含空节点)

firstElementChild:找第一个子节点(不包括空节点)

lastChild:找到节点的最后一个子节点(包含空节点)

lastElementChild:找最后一个子节点(不包括空节点)

children:找第二个以及后面的子节点(是一个集合)

parentNode :根据儿子找父亲(包含空节点)

parentElement:根据儿子找父亲(不包含空节点)

 

节点的查找

找兄弟

nextSibling:包含空节点和文本节点

nextElementSibling:不包含空节点

找哥哥

previousSibling包含空节点和文本节点

previousElementSibling不包含空节点

 

节点的修改

节点插入

insertBefore( ):在已有的子节点前插入一个新的子节点

语法:node.insertBefore(newnode,existingnode)

 

 

复制节点

cloneNode( ):将复制并返回调用它的节点的副本

cloneNode(true)

注:如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。

 

节点的删除

removeChild():从子节点列表中删除某个节点

remove():删除整个节点

 

 

 

上一篇:DOM


下一篇:html DOM 03 节点的属性