最近在看《JavaScript Dom编程艺术》这本书,入门经典书,首先推荐之~
进入正题,首先。何为DOM?
D——document,O——object,M——Model or Map.(具体阐述可参考上书第三章)。
DOM编程就是把整个表示为一棵树,所以我们一般使用的方法有:
document.getElementById(返回一个对象)
document.getElementsByTagName(返回一个对象数组)
document.getElementsByClassName(返回一个对象数组,html5中的dom才添加,所以使用的时候最好是加一个函数判断一下浏览器是否能够支持,再做出反应)
element.getAttribute获得属性
element.setAttribute("属性名",属性值)设置属性,但是不会改变文档静态内容,加载之后会刷新。
element.childNodes子节点
element.nodeType元素节点为1,属性节点为2,文本节点为3
element.nodeValue可以用于获取,也可以直接设置(element.nodeValue=text;)
element.firstChild(lastChild)第一个孩子节点和最后一个孩子节点
OK,了解完这些之后,就像开始买好了食材了一样,可以小试一把了~
首先,写好html文档,把整个网页内容和架构搭好
然后,加入css调整一下,最后就是js文档啦。
function showPic(pic){ //获得placeholder,然后将被点击的图片的链接给placeholder var source=pic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); //同样的方法将图片下方的文字改变。因为文字只是其中的文本节点,不是属性,所以不能完全用相同方法。 var text=pic.getAttribute("title"); var description=document.getElementById("description"); description.firstChild.nodeValue=text; }
这是最后的效果,点击上面的小图,下面会对应显示,文字也会随之变化。
当然如果你考虑地更多,可能用户会不用禁止了js或者是浏览器有什么问题。这就是平稳退化的问题。为了安全起见,不老是报错,我们最好还是进行对象检测。改进之后的js代码是这样的
// JavaScript Document window.onload=prepare; function prepare(){ if(!document.getElementsByTagName)return false; if(!document.getElementById)return false; if(!document.getElementById("imagegallery"))return false; var gallery=document.getElementById("imagegallery"); var myLink=gallery.getElementsByTagName("a"); for(var i=0;i<myLink.length;i++){ myLink[i].onclick=function(){ return showPic(this)?false:true; } } } function showPic(pic){ if(!document.getElementById("placeholder"))return false; var source=pic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); if(document.getElementById("description")){ var text=pic.getAttribute("title"); var description=document.getElementById("description"); description.firstChild.nodeValue=text; } return true; }
附件是做这个的所有文件~~
补充一些以上文件没有用到的常见的动态改变标签的方法:
createElement创建对象
createTextNode创建文本节点
appendChild添加子节点,让创建节点加入文本的树里
insertBefore将节点添加到某个节点之后
需要注意的是没有insertAfter的方法,可以自己写一个
funciton(newElement,targetElement){ //先获取父节点 var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement)} else{ parent.insertBefore(newElement,targetElement.nextSibling); } }
评论
有的,只是html5中增加了getElementsByClassName这样的方法