把整個圖片庫的瀏覽鏈接集中安排在圖片庫主頁里,只在用戶點擊了這個主頁里的某個圖片鏈接時才把相應(yīng)的圖片傳給他。
- 標(biāo)記
- 設(shè)置一個“占位符”,可以設(shè)置id用JS對位置進(jìn)行操作。
- setAttribute 和 非DOM解決方案
- 非DOM
element.attribute = value;等價于 - DOM
element.setAttribute("attribute","value");
第一級DOM的優(yōu)勢:可以修改文檔中的任何一個元素的任何一個屬性;可移植性好。應(yīng)用于Web瀏覽器以外的應(yīng)用環(huán)境
那些老方法只適合于Web文檔,DOM則適合于任何一種標(biāo)記語言。
DOM是一種適用于多種環(huán)境和多種程序設(shè)計的通用型API
- 把JS和文檔結(jié)合
first:<script type="text/javascript" src="scripts/showPic.js"></script>
second://事件處理函數(shù)(event handler):在特定事件發(fā)生時調(diào)用特定的JS代碼 //阻止默認(rèn)行為被調(diào)用,即防止打開新的窗口 onclick="showPic(this); return false";
- onmouseout onmouseover onclick
- 在一個網(wǎng)頁上切換文本
DOM屬性
childNodes : 用來獲取任何一個元素的所有子元素,返回數(shù)組
function countBodyChildren(){ var body_element = document.getElementsByTagName("body")[0]; alert(body_element.childNodes.length); } window.onload = countBodyChildren;//返回值特別大-
nodeType :每一個節(jié)點都有這個屬性,讓我們知道自己正在于哪個節(jié)點打交道,它的值為數(shù)字(共12種)
- 1->元素節(jié)點
- 2->屬性節(jié)點
- 3->文本節(jié)點
nodeValue:得到和設(shè)置一個節(jié)點的值
<p id = "description">choose me.</p>//description.nodeValue返回null,<p>本身的這個屬性為空 description.childNode[0].nodeValue √node.firstChild == node.childNode[0];
node.lastChild == node.childNode[node.childNode.length-1];