JavaScript之DOM

 

学习的网站：

javascript初级教程 http://www.iselong.com/online/ebooks/javascript/

http://www.aspxboy.com/myjs/jsnote/

www.ajaxian.com

www.ajaxpatterns.org

www.ajaxmatters.com/r/welcome

www.ajaxblog.com

www.adaptivepath.com

 

DOM的属性

childNodes

firstChild

lastChild

nextSibling

nodeValue

parentNode

previousSibling

DOM方法

getElementById(id)

getElementByTagName(name)

hasChildNodes()

getAttribute(name)

 

For example DOM

window.οnlοad=function(){

var hello=document.getElementById('hello');

hello.className='declared';

var empty=document.getElementById('empty');

addNode(empty,"reader of");

addNode(empty,"Ajax in Action!");

var children=empty.childNodes;

for (var i=0;i<children.length;i++){

children[i].className='programmed';

}

empty.style.border='solid green 2px';

empty.style.width="200px";

}

function addNode(el,text){

var childEl=document.createElement("div");

el.appendChild(childEl);

var txtNode=document.createTextNode(text);

childEl.appendChild(txtNode);

}

For example

document.getElementsByTagName("UL")

 

For example

function addListItemUsingInnerHTML(el,text){

el.innerHTML+="<div class='programmed'>"+text+"</div>";

}

 

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

特别要注意的地方：

1：

<table><tbody name=”myTableBody”></tbody></table>

Var cell = document.createElement(“td”).appendChild(document.createTextNode(“foo”));

Var row = document.createElemnet(“tr”).appendChild(cell);

Document.getElementById(“myTableBody”).appendChild(row);

 

2:

var spanElement = document.getElementById(“mySpan”);

spanElement.setAttribute(“style”,”font-weight:blod;color:red;”);

spanElement.style.cssText = “font-weight:blod;color:red;”;

 

3:

element.setAttribute(“class”,”styleclass”);

element.setAttribute(“className”,”styleclass”);

 

 

4:

var button = document.createElement(“input”);

button.setAttribute(“type”,”button”);

document.getElementById(“form1”).appendChild(button);