getElementById的用法

getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。

返回具有指定ID属性值的第一个对象的一个引用。

语法：

Element = document.getElementByIdx_x_x(“id”)

获得ID值=id的所有属性和方法

JS中经常使用它通过控件ID取得元素的值，如一个form里包含text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。

实例1：

<html><head></head><body><input id="inTag" name="inName" value="bijian" type="text" /><input type="submit" value="获取值" onClick="getValue()"/></body><script language="javascript">window.onload = function run(){   var inTag = document.getElementByIdx_x("inTag"); inTag.value = "hello!";}function getValue() {var inTag = document.getElementByIdx_x("inTag");alert(inTag.value);}</script>
</html>

实例2：

<html><head><title>getElementById</title></head><body><a id="mr" href="http://www.baidu.com/">百度</a><form name="myform"><input type="button" value="更换连接" onClick="change()"/></form></body><script language="javascript">function change() {document.getElementByIdx_x("mr").innerHTML = "金山123";document.getElementByIdx_x("mr").href="http://123.duba.net/";}</script>
</html>

实例3：

<html><head><title>getElementById</title></head><body><h1 id="divTest" οnmοusemοve="s()" οnmοuseοut="reset()" align="center">这是一个有感觉的标记</h1></body><script language="javascript">function reset() {var divTest = document.getElementByIdx_x("divTest");divTest.innerHTML = "这是一个有感觉的标记";}function s()  {var divTest = document.getElementByIdx_x("divTest");divTest.innerHTML = "老鼠来了";}</script>
</html>

实例4：

<html><head><title>getElementById4</title></head><body><font ID=main_title size=6><b>虚拟网络世界</b></font></body><script language="javascript">var n = 0;function changefontcolor() {n=n%4;switch(n) {case 0:main_title.color="red";break;case 1:main_title.color="green";break;case 2:main_title.color="blue";break;case 3:main_title.color="yellow";}n++;}//定时执行函数每秒钟调用changefontcolor()函数一次，改变大标题的颜色setInterval("changefontcolor()",1000);</script>
</html>

实例5：

<html><head><title>getElementById5</title></head><body onKeypress="showCapture()"><h1 ID="num" align="center">0000</h1></body><script language="javascript">var r;function showNextNum() {var m_num=Math.floor(Math.random()*(3000-1000))+1000;num.innerHTML = m_num;}function showCapture() {clearTimeout(r);}r = setInterval("showNextNum()",100);</script>
</html>

getElementById的用法相关推荐

document.getElementById 用法详解！
document.getElementById(" ") 得到的是一个对象,用 alert 显示得到的是 " object ",而不是具体的值,它有 value ...
getelementbyid属性与用法
语法:oElement = document .getElementById ( sID ) 参数:sID――必选项.字符串 (String) . 返回值:oElemen――对象 (Element) ...
document.getElementById 学习总结
document.getElementById获取控件对象为空的解决方法 1.下面是一个简单的例子,页面加载时显示一段信息代码如下: <%@ page language="java& ...
document.getElementById()方法使用
原文地址为: document.getElementById()方法使用 document.getElementById使用语法:oElement = document .getElementByI ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
java 获取js html_JS获取网页中HTML元素的几种方法
编写js程序的时候最常使用的就是获取网页中的html元素,并进行处理,我在网上发现了一篇获取html对象的几种方法进行整理的帖子,发上来大家一块学习~ getElementById getElemen ...
JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
JavaScript标签选取
声明:本人的所有博客皆为个人笔记,作为个人知识索引使用,因此在叙述上存在逻辑不通顺.跨度大等问题,希望理解.分享出来仅供大家学习翻阅,若有错误希望指出,感谢! JS获取DOM元素的方法通过ID获取( ...

getElementById的用法

getElementById的用法相关推荐

最新文章

热门文章