JavaScript是Web全栈学习的基础，其中DOM树的操作是非常常见的。下面让我们跟随无限互联Web全栈培训中心的老师一起了解一下“常见DOM树操作”。

Web全栈培训课程：常见DOM树操作解析

XML是eXtensible Markup Language的缩写，它是一种可扩展性标识语言, 能够让你自己创造标识，标识你所表示的内容。DOM全称是Document Object Model(文档对象模型)，定义了一组与平台和语言无关的接口，以便程序和脚本能够动态访问和修改XML文档内容、结构及样式。XML创建了标识，而 DOM的作用就是告诉程序如何操作和显示这些标识。 实际上XML将数据组织成为一棵树，DOM经过解析XML文档，为XML文档在逻辑上建立一个树模型，树的节点是一个个的对象。这样经过操作这棵树和这些对象就可以完成对XML文档的操作，为处理文档的所有方面提供了一个完美的概念性框架。DOM是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，单纯的 Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为 DHTML本质上就是操作DOM树。

下图为DOM的结构表示图，这样也许能够帮助我们理解。

DOM树结构表示图

DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:

◆根结点(document)

◆父结点(parentNode)

◆子结点(childNodes)

兄弟结点兄弟结点

(sibling)(sibling)

注：跨域除外，跨域通常是在操作frame上，简单的说，就是两个frame不属于同一域名。

DOM树的结构

DOM集合：

document.images 文档中所有图片集合

document.images[0] 等价document.images.item(0) 第1个图片

document.images.length 元素长度

JavaScript获取元素的三种方法：

document.getElementById()

document.getElementByTagName()

document.getElementByClassName()

Web全栈培训课程：常见DOM树操作解析

节点属性:

nodeName

nodeValue

nodeType 值为1-12. 1是元素节点;2是属性;3是文本节点

parentNode

childNode

firstNode

lastNode

previousSibling 前一个兄弟节点

nextSibling 后一个兄弟节点

attributes 属性集合

Web全栈培训课程：常见DOM树操作解析

关于节点操作的方法：

createElement() 创建元素节点

createTextNode() 常见文本节点

createAttribute()创建属性节点

appendChild() 追加子节点

insertBefore() 在指定子节点前插入新子节点

removeChild() 删除子节点

replaceChild() 替换子节点

Web全栈培训课程：常见DOM树操作解析

关于属性操作的方法：

getAttribute(attrName) 获取属性对应的值

setAttribute(attrName,value)

removeAttribute(attrName)

hasAttribute(attrName) 是否有某属性

Web全栈培训机构**无限互联Web全栈培训，Web全栈培训引领者，专注Web全栈培训，用心做靠谱的Web全栈培训机构。

以上就是今天为各位总结的，而你想了解更多，提升你的web前端技术，可咨询我们。

课程咨询

咨询老师：詹老师

咨询电话：17706505315

咨询QQ：1379180685

相关推荐