【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基础是下面继续学习的基础，通过对基础理解掌握，对于下面的学习会更有帮助。好长一段时间没有学习它了，应该加快步伐把它学完尽快进入下一部分内容的学习。