[翻译]javascript学习笔记 （二）-DOM

HTML DOM

图片翻转效果

<img src="button_off.gif"
   onmouseover="this.src='button_over.gif';"
   onmousedown="this.src='button_down.gif';"
   onmouseout ="this.src='button_off.gif';"
   onmouseup  ="this.src='button_over.gif';">

动态的添加移除页面上的联系人
  

 var inputs = 0;
 
function addContact(){
    var table = document.getElementById('contacts');

    var tr    = document.createElement('TR');
    var td1   = document.createElement('TD');
    var td2   = document.createElement('TD');
    var td3   = document.createElement('TD');
    var inp1  = document.createElement('INPUT');
    var inp2  = document.createElement('INPUT');

    if(inputs>0){
        var img     = document.createElement('IMG');
        img.setAttribute('src', 'delete.gif');
        img.onclick = function(){
            removeContact(tr);
        }
        td1.appendChild(img);
    }

    inp1.setAttribute("Name", "Name" +inputs);
    //same as   element.name="elementName"
    inp2.setAttribute("Name", "Email"+inputs);

    table.appendChild(tr);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    td2.appendChild(inp1);
    td3.appendChild(inp2);

    inputs++;
}
function removeContact(tr){
    tr.parentNode.removeChild(tr);
}

<table>
   <tbody id="contacts">
      <tr>
         <td colspan="3"><a href="javascript:addContact();">Add a Contact</a></td>
      </tr>
      <tr>
         <td></td>
         <td>Name</td>
         <td>Email</td>
      </tr>
   </tbody>
</table>

我们可以利用childNodes访问子元素,childNodes返回当前元素的子元素数组.也可以用firstChild和lastChild属性访问.

设置表格行显示交替颜色

function setColors(tbody, color1, color2){
    var colors  = [color1, color2];
    var counter = 0;
    var tr      = tbody.firstChild;

    while(tr){
        tr.style.backgroundColor = colors[counter++ % 2];
        tr = tr.nextSibling;
//returns the next element in the DOM with the same parent as the current element.
    }
}

function setColors(tbody, color1, color2){
    var colors  = [color1, color2];

    for(var i=0; i<tbody.childNodes.length; i++){
        tbody.childNodes[i].style.backgroundColor = colors[i % 2];
    }
}

function setColors(tbody, color1, color2){
    var colors  = [color1, color2];
    var trs     = tbody.getElementsByTagName('TR');

    for(var i=0; i<trs.length; i++){
        trs[i].style.backgroundColor = colors[i % 2];
    }
}

getElementsByTagName:返回一个数组,包含具有相同tag名的所有元素

处理文本
页面中的每段文本都被压缩在一个隐藏的#text node中

<div id="ourTest">this is <a href="link.html">a link</a> and an image: <img src="img.jpg"></div>

具有4个根元素 一个文本节点"this is" 一个具有子节点值为"a link"的节点 另外一个文本节点"and an image:" 一个图片元素
改变"and an image:"值

document.getElementById('ourTest').childNodes[2].nodeValue = 'our new text';

访问"a link"值

document.getElementById("ourTest").childNodes[1].childNodes[0].nodeValue;

加div中加入新的文本内容

var newText = document.createTextNode('our new text');
var ourDiv  = document.getElementsById('ourTest');
ourDiv.insertBefore(newText, ourDiv.childNodes[1]);

insertBefore接收两个参数：待添加的元素和现有的元素 将待添加的元素添加到现有元素的前面Created by jecray