js DOM

1.DOM-->Document Object Model

2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，有浏览器厂商定义，用来操作html和xml功能的一类对象的集合，也有人称DOM是对HTML以及XML的标准编程接口。

DOM操作

• 对节点的增删改查

  • 查

    • 查看元素节点

      • document代表整个文档
      • document.getElementById() //元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素。
      • getElementsByTagName() // 标签名
      • getElementByName(); //，需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
      • getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有，可以多个class一起
      • querySelector() // css选择器 在ie7和ie7以下的版本中没有
      • querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有

• 遍历节点树(包括不仅仅元素节点，还有文本节点等所有的节点)

  • parentNode -->父节点（最顶端的parentNode为#document）
  • childNodes -->子节点们
  • firstChild -->第一个子节点
  • lastChild -->最后一个子节点
  • nextSibling-->后一个兄弟节点
  • previousSibling -->前一个兄弟节点

• 基于元素节点树的遍历

  • parentElement -->返回当前元素的父元素节点（IE不兼容）
  • children -->只返回当前元素的元素子节点
  • node.childElementCount === node.children.length当前元素节点的子元素节点个数（IE不兼容）
  • firstElementChild -->返回的是第一个元素节点（IE不兼容）
  • lastElementChild -->返回的是最后一个元素节点（IE不兼容）
  • nextElementSibling/previousElementSibling -->返回后一个/前一个兄弟元素节点（IE不兼容）

• 节点的四个属性

  • nodeName

    • 元素的标签名，以大写形式表示，只读

  • nodeValue

    • Text节点或Comment注释节点的文本内容，可读写

  • nodeType

    • 该节点的类型，只读

  • attributes

    • Element节点的属性集合

• 节点的类型

  • 元素节点 -- 1
  • 属性节点 -- 2
  • 文本节点 -- 3
  • 注释节点 -- 8
  • document -- 9
  • DocumentFragment -- 11

• 该节点一个方法Node.hasChildNodes() //返回true或者false

DOM树结构

• getElementById方法定义在Document.prototype上，即Element节点上不能使用。
• getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document以外不能使用(xml document,Element)
• getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
• HTMLDocument.prototype定义了一些常用的属性，body,head,分别指代HTML文档中的标签。
• Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素
• getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义

//封装函数，返回元素e的第n层祖先元素节点
<div>
  <strong>
     <span>
        <i></i>
     </span>
  </strong>
</div>
<script>
  function retParent(elem,n){
     while(elem && n){
         elem=elem.parentElement;
         n--;
     }
     return elem;
  }
  var i=document.getElementsByTagName('i')[0];
<script>

//编辑函数，封装myChildren功能，解决以前部分浏览器的兼容性问题
Element.prototype.myChildren=function(){
    var child=this.childNodes;
    var len=child.length;
    var arr=[];
    for(var i=0;i<len;i++){
        if(child[i].nodeType==1){
            arr.push(child[i]);
        }
    }
    return arr;
}
var div=document.getElementsByTagName('div')[0];

DOM节点创建

• 增
  • document.createElement();
  • document.createTextNode();
  • document.createComment();
  • document.createDocumentFragment();
• 插
  • PARENTNODE.appendChild();
  • PARENTNODE.insertBefore(a, b):
• 删
  • parent.removeChild();
  • 销毁自身child.remove（）；
• 替换
  • parent.replaceChild(new, origin);

Element节点的一些属性

* innerHTML
* innerText(火狐不兼容) / textContent(老版本IE不好使)

Element节点的一些方法

* ele.setAttribute()
* ele.getAttribute();

//封装函数insertAfter();功能类似insertBefore();
Element.prototype.insertAfter=function(targetNode,afterNode){
    var beforeNode=afterNode.nextElmentSibling;
    if(beforeNode==null){
        this.appendChild(TargetNode);
    }else{
        this.insertBefore(targetNode,beforeNode);
    }
}