DOM可以做什么？（一）

隐藏和显示
隐藏段落显示段落
 
上面的按钮可以控制我的显示和消失哦。这个特效就是通过JavaScript配合HTML DOM来完成的。代码如下：
JavaScript代码：
<script type="text/javascript">
  function hide(){
  document.getElementById("hiddenTest").style.display = "none" ;
 }
  function show(){
  document.getElementById("hiddenTest").style.display = "block" ;
 }
</script>
HTML代码：
<form action="#">
 <button onclick="hide(); return false;" value="隐藏" >隐藏段落</button>
 <button onclick="show(); return false;" value="显示" >显示段落</button>
 </form>
 <p id="hiddenTest">上面的按钮可以控制我的显示和消失哦。……</p>
 
============================================================================================================
 
getElementById() —— 直接拿下法
这是访问某个节点的最简单的方法，例如，网页中有一个id为“testId”的元素，则可以通过getElementById(“testId”)来访问这个节点。这么说还不是很清楚，还是看一个例子吧。
使用getElementById()的实例
首先，我们现在这个网站中加入一个段落，HTML代码如下
<p id="testId">
这个段落是为了展示getElementById()方法访问DOM节点的。<br />
  <img src="../../images/logo.gif" alt="展示如何访问DOM" /><br />
</p>
那么我们就可以使用getElementById(“testId”)来访问这个段落，下面我们就用一段示例JavaScript代码来控制这个段落的显示和隐藏。JS代码如下：
<script type="text/javascript">
 function hide(){
 document.getElementById("testId").style.display = "none" ;
 }
 function show(){
 document.getElementById("testId").style.display = "block" ;
 }
 </script>
……
<form action="#">
<button onclick="hide(); return false;" value="隐藏" >把它吃掉</button>
<button onclick="show(); return false;" value="显示" >把它吐出来</button>
</form>
 
=================================================================================================================
使用getElementsByTagName()，可以按照标签的名称，一次选中批量的元素。
getElementsByTagName()
使用上一节介绍的getElementById()的方法，一次只能访问一个节点，原因很简单，它是以HTML中的id来作为选择条件的。DOM中提供了另一种选中批量节点的方法——getElementsByTagName()则。它以标签作为选择的条件，例如，下面的JavaScript代码将会选中当前网页中的所有段落。
document.getElementsByTagName("p")
根据上一节的经验，我们似乎可以马上对这些段落进行一些操作了。不过，getElementsByTagName()返回的并不是一个节点，而是一个节点列表。所以如果我们想对上面代码取得的所有段落进行操作，方式也会有所不同。还是来看一个例子吧。
使用getElementsByTagName()的实例
<script type="text/javascript">
function allPara(){
//paras存储所有段落
paras = document.getElementsByTagName("p");
//paraNum循环变量，用于选中每个单独的段落
var paraNum;
//从零开始循环，paras.length是段落节点的个数
for (var paraNum=0;paraNum<paras.length;paraNum++)
 {
  //操作：给段落设置边框。
  paras[paraNum].style.border = "1px dashed pink";  
 }
}
</script>

摘自 刘海闯的专栏