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接收两个参数：待添加的元素和现有的元素 将待添加的元素添加到现有元素的前面