demo-自制DOM库-20170610

[yuzhu9]

window.dom = {}

dom.create = function (tagName, children, attributes) {
    var tag = document.createElement(tagName);
    if (typeof children === 'string') {
        var text = document.createTextNode(children)
        tag.appendChild(text)
    } else if (children instanceof HTMLElement) {
        tag.appendChild(children)
    } else if (children instanceof Array) {
        for (var i = 0; i < children.length; i++) {
            if (typeof children[i] === 'string') {
                text2 = document.createTextNode(children[i]);
                tag.appendChild(text2);
            } else if (children[i] instanceof HTMLElement) {
                tag.appendChild(children[i]);
            }
        }
    }
    if (typeof attributes === 'object') {
        for (var key in attributes) {
            tag.setAttribute(key, attributes[key]);
        }
    }
    return tag
}

dom.empty = function (tag) {
    var firstChild = tag.childNodes[0];
    while (firstChild) {
        firstChild.remove();
        firstChild = tag.childNodes[0];
    }
}

dom.find = function (selector, scope) {
    if (scope instanceof HTMLElement) {
        return scope.querySelectorAll(selector)
    } else {
        return document.querySelectorAll(selector)
    }
}

dom.children = function (tag) {
    return tag.children
}

dom.text = function (tag) {
    var children = tag.childNodes;
    for (var i = 0; i < children.length; i++) {
        var result = '';
        if (children[i].nodeType === 3) {
            result += children[i].textContent.trim();
        }
    }
    return result
}

dom.attr = function (tag, attr) {
    for (var key in attr) {
        tag.setAttribute(key, attr[key])
    }
}

dom.style = function (tag, styles) {
    for (var key in styles) {
        tag.style[key] = styles[key]
    }
}

dom.bigBrother = function (tag) {
    var previous = tag.previousSibling;
    while (previous !== null && previous.nodeType !== 1) {
        previous = previous.previousSibling;
    }
    return previous
}

[yuzhu9]

<script>
    // 第一个：dom.create
    var div1 = dom.create('div', ['这是文字', dom.create('span', 'ttt'), '2'], {
        class: 'div1',
        id: 'd1'
    });
    console.log(div1);
    // <div class="div1" id="d1">
    //    "这是文字"
    //     <span>ttt</span>
    //     "2"
    // </div>

    // 第二个：dom.empty
    console.log(dom.empty(div1)); // <div class="div1" id="d1"></div>

    // 第三个：dom.find
    var div2 =dom.create('div','这是文字',{
        class: 'div2',
        id: 'd2'
    })
    document.body.appendChild(div2);
    document.body.appendChild(dom.create('div'));
    console.log(dom.find('#d2')); // [div#d2.div2]
    console.log(dom.find('div')); // [div#d2.div2, div]

    // 第四个：dom.children
    var div3 = dom.create('div');
    div3.appendChild(dom.create('span'));
    div3.appendChild(dom.create('em'));
    console.log(dom.children(div3)); // [span, em]

    // 第五个：dom.text
    var div4 = dom.create('div','这是DIV');
    console.log(dom.text(div4)); // 这是DIV

    // 第六个：dom.attr
    var div5 = dom.create('div');
    dom.attr(div5,{
        id: 'd5',
        class: 'div5'
    })
    console.log(div5.getAttribute('id')); //d5
    console.log(div5.getAttribute('class')); // div5

    // 第七个：dom.style
    var div6 = dom.create('div');
    document.body.appendChild(div6);
    dom.style(div6,{
        width: '100px',
        height: '80px',
        border: '1px solid'
    })
    // 页面出现一个宽100px 高80px 边框1px的盒子

    // 第八个：dom.bigBrother
    var div7 = dom.create('div');
    var span1 = dom.create('span','span1');
    var em1 = dom.create('em','em1');
    var span2 = dom.create('span','span2');
    var em2 = dom.create('em','em2');
    div7.appendChild(span1);
    div7.appendChild(em1);
    div7.appendChild(span2);
    div7.appendChild(em2);
    console.log(div7);
    console.log(dom.bigBrother(span1)); // null
    console.log(dom.bigBrother(em1)); // <span>span1<span>
    console.log(dom.bigBrother(span2)); // <em>em1</em>
    console.log(dom.bigBrother(em2));// <span>span2<span>
</script>