DOM继承树,DOM基本操作

关系
document ---> HTMLDocument.prototype ---> Document.prototype
创建节点
增
document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();
插
PARENTNODE.appendChild();
PARENTNODE.insertBefore(a, b):
删
parent.removeChild();
替换
parent.replaceChild(new, origin);

Element节点的一些属性
innerHTML
innerText(火狐不兼容) / textContent(老版本IE不好使)
Element节点的一些方法
ele.setAttribute()
ele.getAttribute();
用js写html标签

    var div=document.createElement('div');
        div.setAttribute('class','example');
        var p = document.createElement('p');
        p.setAttribute('class','slogan');
        p.innerText='查收的方法';
        div.appendChild(p);
        document.body.appendChild(div);

封装函数insertAfter()；功能类似insertBefore();
insertAfter(添加元素 在谁的后面添加) insertBefore(添加元素 在谁的前面添加)

<div>
            <i></i>
            <b></b><span></span></div>
        <script type="text/javascript">
            Element.prototype.insertAfter = function (targetNode,AfterNode){
            var beforeNode=AfterNode.nextElementSibling;
            if(beforeNode == null){
                this.appendChild(targetNode);
            }else{
                this.insertBefore(targetNode,beforeNode);
            }
            }
            var div = document.getElementsByTagName('div')[0];
            var span = document.getElementsByTagName('span')[0];
            var i = document.getElementsByTagName('i')[0];
            var b= document.getElementsByTagName('b')[0];
            var p=document.createElement('p');
            div.insertAfter(p,span);

将目标节点内部的节点顺序逆序

    // 将目标节点内部的节点逆序
            Element.prototype.invertedChild = function() {
                var child = this.children;
                len = child.length;
                for (var i = len - 2; i >= 0; i--) {
                    this.appendChild(child[i]);
                }
                return this;
            }
            var div = document.getElementsByTagName('div')[0];
            div.invertedChild();
//          var strong = document.createElement('strong');
//          div.appendChild(strong)