javascript三种获取dom对象的方法

最新推荐文章于 2025-10-14 16:03:17 发布

转载最新推荐文章于 2025-10-14 16:03:17 发布 · 846 阅读

本文介绍了三种常见的DOM元素获取方法：通过ID获取元素的getElementById()、通过标签名获取元素的getElementsByTagName()以及通过名称获取元素的getElementsByName()，并提供了具体的示例代码。

1、getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" οnclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>

2. getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()"
value="How many input elements?" />

</body>

3、getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" οnclick="getElements()"
value="How many elements named 'myInput'?" />

</body>

原文地址：http://blog.youkuaiyun.com/ynw1990/article/details/52440158