Javascript学習過程のDOMモデル

getElemenntById()(e 1)

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

getElements ByTagName(「ul」)(e 1)

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

親ノードparent Node(e 1)

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

 
サブノードchildNodes(e 1)

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 + "
";
        }
    }
    alert(str);
}

 
兄弟関係nextSibling,previous Sibling(e 1)

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

 
隣接する兄弟ノードにアクセスする(e 1)

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/Img 2.jpg」)を設定し、getAttribute(「title」)は属性の値を取得します.

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

 
新しいノード(e 3)createElement()、createText Node()、apendChild()を作成し、追加します.

function createElem() {
    var newp = document.createElement("p");
    var newtext = document.createTextNode("DOM        ");
    newp.appendChild(newtext);
    document.body.appendChild(newp);
}

 
ノード(e 4)removeChild()を削除します.

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

 
置換ノード(e 5)replacceChild(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);
}

 
特定のノードの前にノード(e 6)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);
}

 
ドキュメントの断片を一度に挿入して、テキストを挿入する時間の問題を解決します.

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);
}

 
特定のノードを挿入して、新しい関数(e 8)insertAfter(newElem,tagetElem)を作成します.

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属性は、複数のノード(e 9)inners HTMLを取得する.

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

 
className属性を変えることでcss(e 10)を変化させる.

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";
}

 
classis Name属性を変更してcss属性(e 10)mys.class Name+=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";
}