Javascript学习历程之DOM模型

getElementById() （e1）

function myPhone() {
    var myItem = document.getElementById("myphone");
    alert(myItem.tagName + " " + myItem.childNodes[0].nodeValue);
}

getElementsByTagName("ul") （e1）

function myPhone() {
    var myItem = document.getElementsByTagName("ul");
    alert(myItem.length+myItem[0].childNodes[0].nodeValue);
}

父节点parentNode （e1）

function myPhone() {
    var myItem = document.getElementById("myphone");
    alert(myItem.parentNode.tagName);
}

 

子节点childNodes （e1）

function myPhone() {
    var myItem = document.getElementById("phone");
    var str = "";
    if (myItem.hasChildNodes()) {
        var oCH = myItem.childNodes;
        for (var i = 0; i < oCH.length; i++) {
            str += oCH[i].nodeName + "\n";
        }
    }
    alert(str);
}

 

兄弟关系nextSibling ，previousSibling （e1）

function myPhone() {
    var myItem = document.getElementById("myphone");
    var nextListItem = myItem.nextSibling;
    var preListItem = myItem.previousSibling;
    alert(nextListItem.tagName+" "+preListItem.tagName);
}

 

访问相邻的兄弟节点 （e1）

function nextSib(node) {
    var tempLast = node.parentNode.lastChild;
    if (node == tempLast) {
        return null;
    }
    var tempObj = node.nextSibling;
    while (tempObj.nodeType != 1 && tempObj.nextSibling != null)
        tempObj = tempObj.nextSibling;
    return (tempObj.nodeType == 1) ? tempObj : null;
}
function prevSib(node) {
    var tempfirst = node.parentNode.firstChild;
    if (node == tempfirst) {
        return null;
    }
    var tempObj = node.previousSibling;
    while (tempObj.nodeType != 1 && tempObj.previousSibling != null)
        tempObj = tempObj.previousSibling;
    return (tempObj.nodeType == 1) ? tempObj : null;
}
function myPhone() {
    var myItem = document.getElementById("myphone");
    var nextListItem = nextSib(myItem);
    var preListItem = prevSib(myItem);
    alert("后一项：" + ((nextListItem != null) ? nextListItem.firstChild.nodeValue : null) + "前一项：" + ((preListItem != null) ? preListItem.firstChild.nodeValue : null));
}

 

设置节点属性setAttribute("src", "Img/Img2.jpg")，getAttribute("title")获取属性的值

function changeImg() {
    var myImg = document.getElementsByTagName("img")[0];
    myImg.setAttribute("src", "Img/Img2.jpg");
    myImg.setAttribute("title", "夜色");
}

 

创建和添加新节点（e3） createElement(),createTextNode(),appendChild()

function createElem() {
    var newp = document.createElement("p");
    var newtext = document.createTextNode("DOM创建和添加新节点");
    newp.appendChild(newtext);
    document.body.appendChild(newp);
}

 

删除节点（e4）removeChild()

function deleteElem() {
    var deleteElem = document.getElementsByTagName("p")[0];
    deleteElem.parentNode.removeChild(deleteElem);
}

 

替换节点（e5）replaceChild(newElem, oldElem);

function replaceElem() {
    var oldElem = document.getElementsByTagName("p")[0];
    var newElem = document.createElement("div");
    var newText = document.createTextNode("替换后的节点是div");
    newElem.appendChild(newText);
    oldElem.parentNode.replaceChild(newElem, oldElem);
}

 

特定节点前插入节点（e6）insertBefore(newElem, oldElem)

function insertElem() {
    var oldElem = document.getElementsByTagName("p")[0];
    var newElem = document.createElement("p");
    var newText = document.createTextNode("插入后的节点");
    newElem.appendChild(newText);
    oldElem.parentNode.insertBefore(newElem, oldElem);
}

 

创建一个文档碎片一次性插入,解决插入文本多时的时间问题（e7）createDocumentFragment()

function insertElems() {
    var phone = ["Iphone", "Lumia800", "htc", "iPad2"];
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < phone.length; i++) {
        var newElem = document.createElement("p");
        var newText = document.createTextNode(phone[i]);
        newElem.appendChild(newText);
        fragment.appendChild(newElem);
    }
    document.body.appendChild(fragment);
}

 

特定节点后插入，创建新函数（e8）insertAfter(newElem, targetElem)

function insertAfter(newElem, targetElem) {
    var oParent = targetElem.parentNode;
    if (oParent.lastChild == targetElem)
        oParent.appendChild(newElem);
    else
        oParent.insertBefore(newElem, targetElem.nextSibling);
}
function insertElem() {
    var oldElem = document.getElementById("Lumia800");
    var newElem = document.createElement("div");
    var newText = document.createTextNode("iPad2");
    newElem.appendChild(newText);
    insertAfter(newElem, oldElem);
}

 

innerHTML属性获取多个节点（e9）innerHTML

function DOMinnerHTML() {
    var mydiv = document.getElementById("innerHtml");
    mydiv.innerHTML = "<img src='Img/Img1.jpg' title='美景' alt=''/>";
}

 

通过改变className属性变化css（e10）

function check() {
    var myid = document.getElementById("ul-e10");
    var newElem = document.createElement("p");
    var newText = document.createTextNode("通过改变className属性变化css");
    newElem.appendChild(newText);
    myid.parentNode.insertBefore(newElem, myid);
    myid.className = "b";
}

 

通过改变className属性叠加css属性（e10）myid.className += "b";

function check() {
    var myid = document.getElementById("ul-e10");
    var newElem = document.createElement("p");
    var newText = document.createTextNode("通过改变className属性变化css");
    newElem.appendChild(newText);
    myid.parentNode.insertBefore(newElem, myid);
    myid.className += "b";
}