DOM（文档对象模型）是针对html和xml文档的一个api，DOM描绘的是一个层次化的节点树，允许开发人员进行添加、移除和修改页面的某一部分。注意，IE中的所有DOM对象都是以COM对象的形式实现的，这也就意味着IE中的DOM对象与原生的JavaScript对象的行为或活动特点并不一致。

一、Node的类型

DOM1级顶一个一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的，除了IE之外，在其它所有浏览器中都可以访问到这个类型。JS中的所有节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法。
每个节点都含有一个nodeType属性，用于表明节点的类型。例如：

  • Node.ELEMENT_NODE(1);
  • Node.ATTRIBUTE_NODE(2);
  • Node.TEXT_NODE(3);
  • Node.CDATA_SECTION_NODE(4);
  • ….

每个节点都会有一个childNodes的属性，其中保存着的是一个NodeList对象。它其实是一种类数组对象，用于保存一组有序的节点。我们可以利用如下方式来访问NodeList中的节点

  1. let childNodeFirst=someNode.childNodes[0];
  2. 或者
  3. let chlidNodeSecond=someNode.childNodes.item(1)
  4. let len=someNode.childNodes.length    //获取长度

虽然说childNodes是一个类数组对象，但是我们可以利用参照对arguments对象使用Array.prototype.slice()方法转化成数组的思想，将childNode转换成数组，同时为了兼容IE浏览器，我们可以这样去做：

  1. function covertToArray(nodes){
  2.     let array=null;
  3.   try{
  4.       array=Array.prototype.slice.call(nodes,0);
  5.   }catch(ex){ 
  6.     //针对IE浏览器的特殊情况，手动枚举所有成员
  7.       array=new Array();
  8.     for(let i=0;i<nodes.length;i++)
  9.       array.push(nodes[i]);
  10.   }
  11. }

每一个节点都会有一个parentNode的属性，该属性指向的是文档树中的父节点。此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。其中，列表中的第一个节点的previousSibling属性的值为null，而列表中最后一个节点的nextSibling属性的值同样也为null。列表中的第一个节点的属性为firstChild，最后一个节点的属性为lastChild。

1、操作节点

  1. let node=someNode.appendChild(newNode); //向childNodes列表的末尾添加一个节点
  2. let node=someNode.insertBefore(newNode,referNode); //在referNode之前插入一个新节点
  3. let node=someNode.insertBefore(newNode,null); //插入成为最后一个子节点
  4. let node=someNode.replaceChild(newNode,someNode); //将someNode替换成newNode
  5. let node=someNode.removeChild(someNode); //移除某个节点

其他方法：
利用cloneNode()的方法可以创建调用这个方法的节点的一个完全相同的副本。该方法接收一个bool参数值，表示是否执行深复制，在执行深复制的情况下，也就是复制节点机器整个子节点树，在执行浅复制的情况下，即只复制节点本身。例如：

  1.           <ul>
  2.         <li>这是第1个</li>
  3.         <li>这是第2个</li>
  4.         <li>这是第3个</li>
  5.         <li>这是第4个</li>
  6.         <li>这是第5个</li>
  7.     </ul>
  8. let myList=document.getElementsByTagName("ul")[0];
  9. let deepList=myList.cloneNode(true);
  10. console.log(deepList.length) //5
  12. let shallowList=myList.cloneNode(false);
  13. console.log(shallowList.length) //0

二、Document类型

文档子节点

  • 利用document.documentElement属性获取HTML页面中的元素
  • 利用childNodes列表访问文档元素
  • 利用document.body来获取对body的引用
  • 利用document.doctype来取得对<!DOCTYPE>的引用
  1. let html=document.documentElemet //取得对<html>的引用
  2. 其中如下等式是恒成立的
  3. documentElement=firstChild=childNodes[0]

文档信息

除了HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性。这些属性提供了document对象所表现的的网页的一些信息。
比如利用title属性获取当前页面的标题文字：

  1. let originTitle=document.title

利用URL属性获取页面完整的URL(即地址栏现实的URL)

  1. let url=document.URL

利用domain属性获取包含页面的域名

  1. let domain=document.domain

利用referrer属性获取保存着链接到当前页面的那个页面的URL，在没有来源页面的情况下，referrer属性中可能会包含空字符串。

  1. let referrer=document.referrer

其中URL与domain属性是相互关联的。例如，如果document.URL为http://www.mickey.com/home，那么document.domain就等于www.mickey.com

注：

  1. 这三个属性中只有domain是可以设置的。但由于安全方面的限制，也并非可以给domain设置任何值。如果URL中包含一个子域名，例如p2p.mickey.com，那么就只能将domain设置为mickey.com，URL中包含www时也是如此。
  2. 浏览器对domain属性还有一个限制，即如果域名一开始就是松散的，那么不能将它在设置为紧绷的，换句话说就是在将document.domain设置为mickey.com之后，就不能再将其设置回p2p.mickey.com，否则就会导致错误。

    查找元素

  • getElementById()

注意：IE7以及较低版本还为此方法添加了一个有意思的怪癖，name特性与给定ID匹配的表单元素，比如、