JavaScript基础知识总结——DOM

DOM

• DOM的全称叫做文本对象模型（Document Object Model）;是w3c定义的一种访问html和xml文档的标准，它提供了一系列接口，为程序和脚本动态地访问和更新文档的内容，结构和样式。
• DOM将html或者xml文档描绘成了一个由多节点构成的结构。如下便是DOM的节点层次图

DOM节点层次图

Node

• 说到DOM，有一个不得不说的概念叫做node。什么是node？DOM将html中的整个文档（document），每个元素，注释，每个元素的属性（特性）等等都看作是文档中的一个个节点，而这些节点都属于node类型，就是说这些节点有着共同的属性和方法（nodeType，nodeName，nodeValue），但是又有其自己独立的属性和方法。
  node总共有如下几个类型（加粗的类型后面会详细讲解）：
  1.Node.ELEMENT_NODE(1); 元素节点
  2.Node.ATTRIBUTE_NODE(2); 属性节点
  3.Node.TEXT_NODE(3); 文本节点
  4.Node.CDATA_SECTION_NODE(4); CDATA 区段
  5.Node.ENTITY_REFERENCE_NODE(5); 实体引用元素
  6.Node.ENTITY_NODE(6); 实体
  7.Node.PROCESSING_INSTRUCTION_NODE(7); 表示处理指令
  8.Node.COMMENT_NODE(8); 注释节点
  9.Node.DOCUMENT_NODE(9); 最外层的Root element,包括所有其它节点
  10.Node.DOCUMENT_TYPE_NODE(10);
  11.Node.DOCUMENT_FRAGMENT_NODE(11); 文档碎片节点
  12.Node.OTATION_NODE(12); DTD 中声明的符号节点

var firstChild1 = someNode.childNodes[0];
var firstChild2 = someNode.childNodes.item(0);
var childCount = someNode.childNodes.length;//指的是访问NodeList时其中包含的节点数量
var hasChild = someNode.hasChildNodes()
var parentNode = someNode.parentNode
var dNode  = someNode.ownerDocument

someNode.nodeName
someNode.nodeType  //IE中是数字（例如1,2,3...）；其他浏览器是字符串（例如Node.DOCUMENT_FRAGMENT_NODE）
someNode.nodeValue

• nodeList对象
  一种类数组对象，可以通过[1,2,3...]来索引得到里面的元素,也可以使用item()索引，同时具备length属性；但是nodeLIst对象和数组不一样的是，这个对象是时刻更新的，而不是某一个时刻获取它的时候得到的快照。

//将nodeList对象转换成数组
var nodes = somenode.childNode;    //childNode属性可以返回一个nodeList对象来标识节点的子节点
var array = [];
try{
      array = Array.prototype.slice.call(nodes,0)  
} catch (ex) {  //针对ie
       for(var i=0;i

• 节点操作

somenode.appendChild(othernode)   //向末尾添加某个节点
somenode.insertBefore(newnode,innernode,null)  //向指点位置插入某个节点
somenode.replaceChild(newnode,innernode)   //替换某个节点
somenode.remove(innernode)    //移除某个节点

Document类型

• 概念
  js中通过Document类型表示文档。doucment对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。
  Dcument节点的特征：
  1.nodeType值为9
  2.nodeName为"#document"
  3.nodeValue为null
  4.parentNode为null
  5.ownerDocument为null
  6.其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、processingInstruction或Comment。
• 子节点
  1.documentElement和childNodes内置的访问文档子节点的快捷方式。
  2.documentElement始终指向HTML页面中的元素。
  3.作为HTMLDocument实例，document对象还有一个body属性，直接指向元素。
  4.Document另一个可能的子节点是DocumentType。通常将标签看成一个与文档其它部分不同的实体，可以通过doctype属性访问。

var html = document.documentElement;  //取得对html 引用
     alert(html == document.childNodes[0]);//true
     alert(html == document.firstChild);//true
var body = document.body; //取得对引用
var doctype = document.doctype; //取得对引用

• 文档信息
  1.title属性：包含着