首页 编程语言 Javascript

javascript之document.getElementById的用法

这个小分享道哥就跟大家分享一下getElementById的用法，这个方法它是干什么用的呢，这个啊是最基本的js操作html标签最多也是最常用最基础的方法啦。我们实际运用中用它来获取html中的标签对象，从而达到动态的效果。

第一个我们先来test一下，用getElementById来获取下html文本框中的内容。

已知有如下html代码

<body>
 <input type="text" id="a"/><input type="button" value="获取文本框中的值" onclick="f1()"/><br/>
	 <input type="button" value="获取文本框中的值" onclick="f2()"/>
 </body>

现在我们就用js来获取下id="a"的文本框中的内容

<script type="text/javascript">

function f1()

{

//获取文本框中的值

var a = document.getElementById("a").value;

alert(a);

}

</script>

当我们在点击获取文本框中的值 这个按钮的时候我们就可以获取到a文本框中的内容，实现结果如下

那么既然有获取那同样的就有设置，我们除了可以手动的自己输入内容到文本框中，相反我们依旧可以通过我们的getElementById来给文本框赋值，也就是用代码将内容显示在文本框中，且看下例

 <body>
 <input type="text" id="a" style="color:red;font-size:22px; height:25px;"/>
	 <br/><input type="button" value="获取文本框中的值" onclick="f1()"/><br/>
	 <input type="button" value="给文本框赋值" onclick="f2()"/>
 </body>

<script type="text/javascript">
 function f1()
	{
	 //获取文本框中的值
		var a = document.getElementById("a").value;
		alert(a);
	}
	function f2()
	{
	 //给文本框赋值 点击给文本框赋值的按钮动态赋值
	 document.getElementById("a").value="欢迎来到js世界";
	}

结果如下

本案例完整代码

 <body>
 <input type="text" id="a" style="color:red;font-size:22px; height:25px;"/>
	 <br/><input type="button" value="获取文本框中的值" onclick="f1()"/><br/>
	 <input type="button" value="给文本框赋值" onclick="f2()"/>
 </body>
 <script type="text/javascript">
 function f1()
	{
	 //获取文本框中的值
		var a = document.getElementById("a").value;
		alert(a);
	}
	function f2()
	{
	 //给文本框赋值
	 document.getElementById("a").value="欢迎来到js世界";
	}
 </script>
相关推荐