访问DOM节点1——getElementById()

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

getElementById() —— 直接拿下法

这是访问某个节点的最简单的方法，例如，网页中有一个id为“testId”的元素，则可以通过getElementById(“testId”)来访问这个节点。这么说还不是很清楚，还是看一个例子吧。

使用getElementById()的实例

首先，我们现在这个网站中加入一个段落，HTML代码如下

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

  

那么我们就可以使用getElementById(“testId”)来访问这个段落，下面我们就用一段示例JavaScript代码来控制这个段落的显示和隐藏。JS代码如下：

 
……

把它吃掉
把它吐出来

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

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

把它吃掉把它吐出来

复习JavaScript变量

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

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

para = document.getElementById(“testId”)

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