基础

Document Object Model

文档对象模型

提供结构化表示

提供了JS脚本访问结构的方式

文档节点 Node

document.getElementById()

　document.getElementsByClassName()  此方法有兼容性问题

　document.getElementsByTagName()

解决方案

getElementsByClassName的兼容写法

window.onload = function () {

    function funIsContain(sObject,sTarget) {
        var aObject = sObject.split(" ");
        for (var i=0,l=aObject.length;i<l;i++) {
            if (aObject[i] == sTarget)
                return true;
        }
        return false;
    }
    function funGetClass(sClassName,sId) {
        var oParent = null;
        if (sId) {
            oParent = document.getElementById(sId);
        }else{
            oParent = document;
        }
        if (oParent.getElementsByClassName)
            return oParent.getElementsByClassName(sClassName);
        var aNodes = oParent.getElementsByTagName("*");
        var aContent = [];
        for (var i=0,l=aNodes.length;i<l;i++) {
            if (funIsContain(aNodes[i].className,sClassName))
                aContent.push(aNodes[i]);
        }
        return aContent;
    }
    
}

节点间的关系

父节点　　　　oOBject.parentNode　　　　　　　　　　　　　　
var oparentNode = oOBject.parentNode;

兄弟节点　　　oOBject.previousSibling　　　　　　仅IE678支持
　　　　　　   oOBject.previousElementSibling   仅其他浏览器支持
　　　　　　　　oOBject.nextSibling　　　　　　　　仅IE678　　　   
　　　　　　　 oOBject.nextElementSibling　　　　 仅其他浏览器支持

var oPreviousSibling= oOBject.previousElementSibling || oOBject.previousSibling;
var oNextSibling = oOBject.nextElementSibling || oOBject.nextSibling;

子节点
　　　　　　　　oOBject.firstChild　　　　　　　　　　仅IE678支持
　　　　　　　　oOBject.firstElementChild　　　　　　仅其他浏览器支持仅其他浏览器支持
　　　　　　　　oOBject.lastChild　　　　　　　　　　仅IE678支持 
　　　　　　　　oOBject.lastElementChild　　　　　　仅其他浏览器支持仅其他浏览器支持
所有子节点
　　　　　　　　oOBject.childNodes
　　　　　　　　oOBject.children

function funGetChildNodes(oObject) {
    var aResult = [];
    for (var i=0,l=oObject.childNodes.length;i<l;i++) {
        if(oObject.childNodes[i].nodeType-1) continue;
        aResult.push(oObject.childNodes[i]);
    }
    return aResult;
}

创建节点

var oBody = document.getElementsByTagName("body")[0];

var oNewElement = document.createElement("li");

添加节点
oBody.appendChild(oNewElement);

oBody.insertBefore(oNewElement,funGetChildNodes(oBody)[0]);

删除节点

oBody.removeChild(funGetChildNodes(oBody)[0]);

克隆节点

oBody.appendChild(funGetChildNodes(oBody)[0].cloneNode(true));

/**
 * 获取节点属性
 */
var sLunBoClassName = oLunBo.getAttribute("class");

/**
 * 设置节点属性
 */
oLunBo.setAttribute("class","Sery");
console.log(oLunBo.getAttribute("class"));

/**
 * 删除节点属性
 */
oLunBo.removeAttribute("class");