【JavaScript基础知识】——DOM基础

基本概念

   

    DOM即文档对象模型，针对HTML和XML文档的API（应用程序接口）。它描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM能够以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，也就是表示和处理一个HTML或XML文档的经常使用方法。

    D即document，上网查了一下它的英文翻译，最初的意思是记录。因此把它说是文档也是有迹可循的。O即Object，也就是对象，能够理解为相似window对象之类的东西，能够调用属性和方法。M（模型）能够理解为网页文档的树形结构。到这里，咱们应该想到节点以及节点的一些属性。毕竟咱们学过了数据结构，可是也有别于数据结构，这里的节点是标签节点，节点的种类有元素节点、文本节点和属性节点。

查找元素

    DOM定义了访问HTML和XML文档的标准，元素是HTML和XML重要的组成部分，因此查找元素也是DOM中很重要的一部分。

getElementById()	接受一个参数：获取元素的ID。
getElementsByTagName()	获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()	获取特定元素节点属性的值
setAttribute()	设置特定元素节点属性的值
removeAttribute()	移除特定元素节点属性

 

DOM节点

     节点能够分为元素节点、属性节点和文本节点，而这些节点又有三个很是有用的属性：nodeName、nodeTyoe和nodeValue。和数据结构里的树同样，DOM节点也有层次结构，划分为：父节点与子节点、兄弟节点两种。当咱们获取其中一个元素节点的时候，就能够使用层次节点属性来获取它相关层次的节点。

属性	说明
childNodes	获取当前元素节点的全部子节点
firstChild	获取当前元素节点的第一个子节点
lastChild	获取当前元素节点的最后一个子节点
ownerDocument	获取该节点的文档根节点，至关与document
parentNode	获取当前节点的父节点
previousSibling	获取当前节点的前一个同级节点
nextSibling	获取当前节点的后一个同级节点
attributes	获取当前元素节点的全部属性节点集合

     DOM不仅仅能够查找节点，也能够建立节点、复制节点、插入节点、删除节点和替换节点。

方法	说明
write()	这个方法能够把任意字符串插入到文档中
createElement()	建立一个元素节点
appendChild()	将新节点追加到子节点列表的末尾
createTextNode()	建立一个文件节点
insertBefore()	将新节点插入在前面
replaceChild()	将新节点替换旧节点
cloneNode	复制节点
removeChild()	移除节点

 

总结

     DOM基础是下面继续学习的基础，经过对基础理解掌握，对于下面的学习会更有帮助。好长一段时间没有学习它了，应该加快步伐把它学完尽快进入下一部份内容的学习。