首页 > 其他 > 详细

文档对象模型

时间:2020-03-28 11:00:39      阅读:75      评论:0      收藏:0      [点我收藏+]

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():删除整个节点

 

 

 

文档对象模型

原文:https://www.cnblogs.com/chenjiajiale/p/12586222.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!