访问DOM节点1——getElementById()

刚刚看过了DOM的结构——节点树。现在我们就来看看如何能访问DOM节点树中的特定节点。

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>

实际效果如下，可以点击按钮试一试

这个段落是为了展示getElementById()方法访问DOM节点的。

 

复习JavaScript变量

我们已经知道JS的变量可以存储数字之类的东西，但是我相信大家和我一样，学习JavaScript绝对不是为了做加减乘除。下面我们看看变量的新应用。

其实，我们可以用上面例子中段落用变量存储起来，代码如下：

para = document.getElementById(“testId”)

以后就可以使用para这个变量来访问这个段落了。