解决类名查找元素兼容,节点,CSSOM

解决根据类名查找元素兼容问题:

    function byClassName(className, context) {
        // 默认在 document 文档中查找
        context = context || document;

        /* 支持使用 getElementsByClassName 方法,则直接使用 */
        if (context.getElementsByClassName)
            return context.getElementsByClassName(className);

        /* 不支持使用 getElementsByClassName 方法 */
        // 保存所有查找到元素的数组
        var _result = []; 
        // 将查询上下文后代中所有元素查找出来
        var _tags = context.getElementsByTagName("*");
        // 遍历迭代所有元素
        for (var i = 0, len = _tags.length; i < len; i++) {
            // 获取当前遍历到元素的所有类名
            var _classNames = _tags[i].className.split(" ");
            // 遍历所有类名
            for (var j = 0, l = _classNames.length; j < l; j++) {
                if (_classNames[j] === className) { // 当前元素的某个类名与待查找的类名一致
                    // 说明当前遍历到的元素是需要查找的元素之一
                    _result.push(_tags[i]);
                    break;
                }
            }
        }

        // 返回所有查找到的结果
        return _result;
    }

添加

    创建元素节点:
        var element = document.createElement(tagName)
    设置属性:
        element.setAttribute(attrName, attrValue)
        或
        element. = attrValue
    添加到父元素内部
        parentElement.appendChild(element);
        如果 element 是页面中已存在的DOM元素,则该方法为移动元素
    添加到父元素内部某子节点前
        parentElement.insertBefore(newNode, oldNode);
        如果 oldNode 不存在,则将 newNode 追加到末尾
    元素内部文本:
        element.innerHTML
            -- 内部HTML文本
        element.innerText
            -- 内部纯文本
        创建文本节点:var txtNode = document.createTextNode(text)
        可以将文本节点添加到元素内部:element.appendChild(txtNode);

删除

    parentElement.removeChild(childNode)
        父元素内部删除孩子节点

克隆

    var copy = node.cloneNode(boolean)
        boolean 表示是否克隆元素后代,默认为 false(不克隆),如果需要克隆节点后代,则传递 true

查找(层级--属性):
    node.parentNode -- 查找父节点
    node.childNodes -- 所有孩子节点
    node.children -- 所有孩子元素节点
    node.firstChild -- 第一个孩子
    node.lastChild -- 最后一个孩子
    node.previousSibling -- 前一个兄弟节点
    node.nextSibling -- 后一个兄弟节点

CSSOM
    CSS-Object Model
    获取:
        行内(内联)
            element.style
        所有
            window.getComputedStyle(element) -- 经过计算后的样式
                -- IE9之前浏览器不支持:element.currentStyle
    设置:
        element.style. = attrValue;

你可能感兴趣的:(解决类名查找元素兼容,节点,CSSOM)