DOM（文档对象模型）

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）

• 在DOM中，每个节点都是一个对象；DOM节点有3个重要的属性：nodeName 节点名称、 nodeValue节点值、nodeType节点类型

  1. 每个节点都有一个nodeType属性，用于表明节点的类型，该属性是只读的

  元素类型    节点类型
   元素          1
   属性          2
   文本          3
   注释          8
   文档          9
  

  //判断某个节点的类型
  if(someNode.nodeType == 1){                   //兼容所有浏览器
        console.log("Node is an Element");
  }
  

  2. nodeName只读属性，表示节点的名称

  1.元素节点的 nodeName 与标签名相同
  2.属性节点的 nodeName 是属性的名称
  3.文本节点的 nodeName 永远是text
  4.文档节点的 nodeName 永远是document
  

  3. nodeValue属性，表示属性的值

  1.元素节点的 nodeValue 是 undefined 或 null
  2.文本节点的 nodeValue 是文本自身
  3.属性节点的 nodeValue 是属性的值
  

• 节点之间的关系，就像一个家谱

  1. childNodes属性，该属性保存着一个NodeList对象，是个类数组对象，用于保存一组有序的节点，可以通过位置访问的节点，并且该对象还有length属性；NodeList对象的独特之处在于它是基于DOM结构动态执行查询的结果，DOM结构的变化能够自动反映在NodeList对象中

var firstChild = someNode.childNodes[0];
var count = someNode.childNodes.length;      //length属性表示访问NodeList那一刻时包含的节点数量

2. parentNode属性，指向文档树中的父节点，childNodes列表中的所有节点都拥有相同的父节点，并且这些节点相互之间都是兄弟节点
3. previousSibling属性，返回某个节点之前紧跟的节点（处于同一树层级中）；nextSibling属性，返回某个节点之后紧跟的节点（处于同一树层级中）；2者相同点是，如果无此节点则返回null；因此，列表中第一个节点的previousSibling属性和最后一个节点的nextSibling属性都返回null

if(someNode.nextSibling == null){
       console.log("Last node");
}else if(someNode.previousSibling == null){
       console.log("First node");
}
//如果列表中只有一个节点，那么这2个属性都为null

4. firstChild属性和lastChild属性分别返回childNodes列表的第一个子节点和最后一个子节点，如果没有则返回null

someNode.firstChild == someNode.childNodes[0];
someNode.lastChild == someNode.childNodes[someNode.childNodes.length-1];
//只有一个子节点的情况下，2者指向同一个节点

• 操作节点

  1. appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点，返回新增节点

  var returnNode = someNode.appendChild(newNode);
  console.log(returnNode == newNode);          //true
  console.log(newNode == someNode.lastChild);        //true
  
  //如果传入的节点已经存在于节点树中，则将该节点从原来的位置转移到新位置
  var returnNode = someNode.appendChild(someNode.firstChild);
  console.log(returnNode  == someNode.firstChild);               //false
  console.log(returnNode  == someNode.lastChild);        //true
  

  2. insertBefore()在已有的子节点前插入一个新的子节点，接收2个参数，分别表示要插入的新节点和参照节点，新节点将成为参照节点的前一个兄弟节点（previousSibling）；如果参照节点是null，则相当于执行appendChild()

someNode.insertBefore(newNode,null);           //添加成为最后一个子节点
someNode.insertBefore(newNode,someNode.firstChild);           //添加成为第一个子节点

3. replaceChild()实现子节点(对象)的替换，返回被替换对象的引用；接收2个参数，分别表示要插入的节点和被替换节点；被替换的节点仍然在文档中，只是没有位置了

someNode.replaceChild(newNode,someNode.firstChild);           //替换第一个子节点

4. removeChild()从子节点列表中移除节点，返回被移除节点；移除失败，返回null；同 replaceChild()被移除的节点仍在文档中

someNode.removeChild(someNode.lastChild);           //移除最后一个子节点

5. cloneNode()用于创建调用这个方法的节点的完全相同的副本，接收一个布尔值参数，true表示深复制，也就是复制节点及其整个子节点树，false表示浅复制，只复制节点本身

    
1
    
2
    
3

//假设myList保存了
的引用
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
console.log(deepList .childNodes.length);            //3（非IE）
console.log(shallowList .childNodes.length);          //0

• Document类型

Document类型表示文档；在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面，而且document对象是window对象的一个属性
1.文档的子节点
documentElement属性：始终指向页面中元素

var html = document.documentElement;
html === document.firstChild;                         //true

body属性：指向元素

var body = document.body;

2.文档信息
title属性：包含