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>

 

 

===============================================================================================================================