DOM基本操作

DOM

DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)
首先来看dom中的一些常见的节点类型。

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

对元素节点的增删改查

• 查询
  document.getElementById 。。。。
• 增加
  document.createElement();创建元素节点
  document.createTextNode();创建文本节点
  document.createCommen();注释。。
• 插入
  appendChild() 任意元素节点都有这个方法。移除操作。
  当将已有的元素插入到父节点时，首节点会到最后。
  insertBefore ，随心插入节点
  语法
  parentNode.insertBefore(A,B) 可以理解为insert A before B
  注意是父元素来选择。
• 删除
  removeChild() 并没有真的消失。只是不在列表里 ，可以挽回
  remove() es5.0 中的方法，找不到了了了。
• 替换
  replaceChild(new，old) 拿新的替换老的
• 写入
  innerHTML可以写入HTML结构。
  innerText取文本内容.对 innerText 进行修改， 不仅会移除当前元素的子节点，
  而且还会永久性地破坏所有后代文本节点
  （所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

一些简单的应用

• 遍历某个元素下所有的元素节点

<div>
        <strong>
            <span>1</span>
        </strong>
        <span></span>
        <em></em>
    </div>

Element.prototype.tree = function(blanks){
            var blanks = blanks || [];
            var len = this.children.length;
            console.log(blanks.join("") + "|_" + (this.nodeType == 1 ? this.nodeName:this.nodeValue));
            if(len > 0){
                blanks.push("\t");
                for(var i = 0;i < len;i ++){
                    this.children[i].tree(blanks);
                }
                blanks.pop("\t");
            }
        };
     var div = document.getElementsByTagName('div')[0];
     div.tree();

输出是这样的

这个函数中用了递归的方法，由于效率问题，改成迭代比较好，未来完善。

• 返回第n层祖先节点

<div>
    <strong>
        <span>
            <i></i>
        </span>
    </strong>
</div>

function retParent(elem,n){
            //循环
            while(n != 0 && elem != null){
                elem = elem.parentElement;   //当elem为null时，直接返回就好
                n --;
            }
            return elem;
        }

• 封装函数，返回自己的兄弟节点。输入n，当n>0时，返回该元素后的兄弟元素；当n < 0 时，返回该元素前的兄弟元素。当n = 0时，返回自己。

function retSibling(e,n){
            while(n && e){        //排除e为null时的情况
                if(n > 0){
                    if(e.nextElementSibling)
                    e = e.nextElementSibling;     
                     //兼容垃圾IE，抛弃了nextElementSibling  and previousElementSibling
                    else{
                        while(e.nodeType != 1 && e){
                            e = e.nextSibling;
                        }
                        //for(e = e.nextSibling;e && e.nodeType != 1;e = e.nextSibling);  for循环执行句中没有代码是可以省略。。
                    }
                    n--;
                }
                else{
                    e = e.previousSibling;
                    n ++;
                }
            }
            return e;
        }

• 用原生js写一个children函数

Element.prototype.myChildren = function(){
            var child = this.childNodes;
            var len = child.length;
            var result = [];
            for(var i = 0;i < len;i ++){
                if(child[i].nodeType == 1){
                    result.push(child[i]);
                }
            }
            return result;
        }

• 类比insertBefor函数，封装insertAfter函数

Element.prototype.insertAfter = function(elem,sub){
            var newSub = sub.nextElementSibling;
            if(newSub == null){
                this.appendChild(elem);
            }else{
                this.insertBefore(elem,newSub);
            }
        }

主要思路还是基于原有的函数insertBefore，并做适当的修改。
但是上面代码不适用于IE9及以下，可以进一步修改。