JavaScript 中 getElementById 方法的完整使用指南

获取元素属性与内容

通过 document.getElementById("link") 获取链接元素对象后，可直接访问其 href 属性以获取链接地址。

通过 document.getElementById("link") 获取链接元素对象后，可读取其 target 属性值。

通过 document.getElementById("img") 获取图片元素对象后，可访问其 src 属性以获取图片源路径。

通过 document.getElementById("img") 获取图片元素对象后，可读取其 width 属性值。

通过 document.getElementById("img") 获取图片元素对象后，可读取其 height 属性值。

通过 document.getElementById("input") 获取输入框元素对象后，可访问其 value 属性以获取用户输入的值。

若需获取 <div> 或 <a> 标签内的文本内容，例如 <div id="div">aaa</div> 中的 "aaa" 或 <a href="#" id="link">bbb</a> 中的 "bbb"，可使用 innerHTML 属性实现。

通过 document.getElementById("div") 获取元素对象后，访问其 innerHTML 属性即可获取标签内的 HTML 内容。

通过 document.getElementById("link") 获取元素对象后，访问其 innerHTML 属性即可获取标签内的文本内容。

getElementById 方法详解

getElementById 方法

该方法返回文档中第一个具有指定 ID 属性值的元素对象的引用。

语法

oElement = document.getElementById(sIDValue)

参数

sIDValue：必选参数，指定要查找的元素的 ID 属性值的字符串。

返回值

返回文档中 ID 属性值与指定字符串匹配的第一个元素对象。

注释

如果多个元素拥有相同的 ID（虽不符合规范但可能存在），该方法仅返回集合中的第一个对象。

getElementById 方法的功能等同于使用 document.all 集合上的 item 方法。以下示例展示如何从 document 对象中获取 ID 为 oDiv 的第一个元素。

使用 DHTML 对象模型的写法：

var oVDiv = document.body.all.item("oDiv");

使用标准文档对象模型 (DOM) 的写法：

var oVDiv = document.getElementById("oDiv");

代码示例与对比

示例

以下代码演示如何使用 getElementById 方法返回 ID 属性值为 oDiv1 的第一个元素。

<script>

function fnGetId(){

// 返回集合中的第一个 DIV 元素。

var oVDiv=document.getElementById("oDiv1");

</script>

<DIV ID="oDiv1">Div #1</DIV>

<DIV ID="oDiv2">Div #2</DIV>

<DIV ID="oDiv3">Div #3</DIV>

<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">

实际应用与表格操作示例

getElementById 方法

该方法返回具有指定 ID 属性值的元素。例如，若网页中存在一个 text 输入框且其 id 为 text1。

调用 getElementById("text1") 即可获取该 text1 输入框的对象引用，进而可以使用该文本框的所有属性和方法。

这是 JavaScript 的一个内置方法，用于通过控件 ID 获取对应元素的值。例如在 form 表单中包含 text、label 等元素，它们均分配有唯一的 ID，getElementById() 用于获取这些元素的值。

这是 JavaScript 的一个内置方法，用于通过控件 ID 获取对应元素的值。例如在 form 表单中包含 text、label 等元素，它们均分配有唯一的 ID，getElementById() 用于获取这些元素的值。

程序举例

<html> <head>  </head> <body> <table width="60%" id="myTable" border="1"> <tr> <td>行1 单元格1</td> <td>行1 单元格2</td> </tr> <tr> <td>行2 单元格1</td> <td>行2 单元格2</td> </tr> <tr> <td>行3 单元格1</td> <td>行3 单元格2</td> </tr> </table>  </body> </html>

对表格单元进行对齐操作

<html> <head>  </head> <body> <table id="myTable" border="1" width="100%"> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td> </tr> </table>  </body> </html>

修改 colspan 的值

<html> <head>  </head> <body> <table id="myTable" border="1"> <tr> <td colspan="4">单元格1</td> <td colspan="4">单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> <td>单元格7</td> <td>单元格8</td> <td>单元格9</td> <td>单元格10</td> </tr> </table>  </body> </html>