JavaScript DOM入门教程 实例

DOM提供的四个方法：

●getElementById()方法

●getElementsByTagName()方法

●getAttribute()方法

●setAttribute()方法

实例代码：

<div id=”domtest”>
<h1>《DOM编程艺术》</h1>
<p title=”1″>第一章</p>
<p title=”2″>第二章</p>
<p title=”3″>第三章</p>
<p title=”4″>第四章</p>
<p title=”5″>第五章</p>
<p title=”6″>第六章</p>
</div>
<script language=”javascript” type=”text/javascript”>
var arrayB=document.getElementsByTagName(“p”);
for(var i=0; i<arrayB.length;i++)
{
//alert(arrayB[i].getAttribute(“title”));
}

for(var i=0; i<arrayB.length-3;i++)
{
arrayB[i].setAttribute(“title”,”123456″);
//alert(arrayB[i].getAttribute(“title”));
}
</script>

DOM提供的几个新属性：

●childNodes

●nodeType

●nodeValue

●firstChild

●lastChild

实例代码：

<div>
<ul>
<li><a href=”images/001.gif” onclick=”showpics(this);return false;” title=”第一张图片” >pic1</a></li>
<li><a href=”images/002.gif” onclick=”showpics(this);return false;” title=”第二张图片”>pic2</a></li>
<li><a href=”images/3.gif” onclick=”showpics(this);return false;” title=”第三张图片”>pic3</a></li>
</ul>
</div>
<div>
<img id=”imgID” src=”images/act_0.gif” alt=”” />
<p id=”pid”>选择一张图片</p>
</div>
<script language=”javascript” type=”text/javascript”>
function showpics(whichpic)
{
var source=whichpic.getAttribute(“href”);?? //属性“href”要加双引号
var picid=document.getElementById(“imgID”); //常量“imgID”要加双引号
picid.setAttribute(“src”,source); //属性“src”要加双引号，变量“source”不要引号

//var b=document.body
//var b=document.getElementsByTagName(“body”)[0];获得body元素，此举同“var b=document.body”相同作用
//var l=b.childNodes.length;//获得body的子节点数
//alert(l);

var atitle=whichpic.getAttribute(“title”);
var ptext=document.getElementById(“pid”);
ptext.childNodes[0].nodeValue=atitle;
//ptext.firstChild.nodeValue=atitle;? //显示链接的title
}

</script>

实例演示：点击进入

实例代码下载：点击下载