innerHTML、getElementsByName()、getElementsByTagName()

最新推荐文章于 2022-12-03 11:02:35 发布

qq_1572902205

最新推荐文章于 2022-12-03 11:02:35 发布

阅读量439

点赞数

分类专栏：学习之路文章标签： JavaScript innerHTML

本文链接：https://blog.csdn.net/qq_20477309/article/details/51290837

版权

学习之路专栏收录该内容

26 篇文章 0 订阅

订阅专栏

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

返回id=tr2标签之间的元素

<html>
<head>
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("tr2").innerHTML);
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" 
value="Alert innerHTML of table row" />

</body>
</html>

设置id=demo的元素值为My First JavaScript Function

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

getElementsByName()方法按名字返回元素个数
getElementsByTagName() 方法按标签返回元素个数

getElementsByName()方法按名字input返回元素个数

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

<input name="Input" 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" onclick="getElements()"
value="How many elements named 'Input'?" />

</body>
</html>

getElementsByTagName() 方法按标签input返回元素个数

<html>
<head>
<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" onclick="getElements()" value="How many input elements?" />

</body>
</html>