javascript DOM的学习

来源：互联网发布：unity3d如何导入模型编辑：程序博客网时间：2024/05/22 01:47

DOM的五种方法：

getElementById

getElementsByTagName

getElementByClassName

getAttribute

setAttribute

一个简单的例子：点击链接，在同一页面的指定位置显示出图片

<html><head><script type="text/javascript">function showPic(whichPic){var source = whichPic.getAttribute("href");//获取当前元素的href所拥有的属性var placeholder = document.getElementById("d1");//通过ID找到指定的divplaceholder.setAttribute("src",source);//把当前div的"src"属性设置为指定的内容}</script></head><body><h1>show picture</h1><ul><li><a href="images/Home_offers.png" title="the first pic" onclick="showPic(this);return false">picture 1</a></li><li><a href="images/product01.jpg" title="the second pic">picture 2</a></li></ul><img id="d1" src="images/11_03.jpg"></img></body></html>

nodeValue属性，获取对象的节点值，点击按钮，显示文本内容：

function showThis(){var source = document.getElementsByTagName("a")[0];alert(source.childNodes[0].nodeValue);//获取第一个子节点的文本节点的值}