javascript三种获取dom对象的方法

最新推荐文章于 2024-09-10 10:22:59 发布

羊崽

最新推荐文章于 2024-09-10 10:22:59 发布

阅读量6.9k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/ynw1990/article/details/52440158

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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>