javascript学习笔记 （二）-DOM

HTML DOM

图片翻转效果

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < imgsrc = " 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'; " >

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

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> 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);
// sameaselement.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 >
< tbodyid = " contacts " >
< tr >
< tdcolspan = " 3 " >< ahref = " javascript:addContact(); " > AddaContact </ a ></ td >
</ tr >
< tr >
< td ></ td >
< td > Name </ td >
< td > Email </ td >
</ tr >
</ tbody >
</ table >

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

设置表格行显示交替颜色

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> 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;
// returnsthenextelementintheDOMwiththesameparentasthecurrentelement.
}
}

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中

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < divid = " ourTest " > this is < ahref = " link.html " > alink </ a > andanimage: < imgsrc = " img.jpg " ></ div >

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

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> document.getElementById('ourTest').childNodes[ 2 ].nodeValue = 'our new text';

访问"a link"值

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> document.getElementById( " ourTest " ).childNodes[ 1 ].childNodes[ 0 ].nodeValue;

加div中加入新的文本内容

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> var newText = document.createTextNode('our new text');
var ourDiv = document.getElementsById('ourTest');
ourDiv.insertBefore(newText,ourDiv.childNodes[ 1 ]);

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