html dom对象getElementById()方法

定义和用法

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

语法

document.getElementById(id)

说明

HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

实例

例子 1

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

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

</body>
</html>

例子 2

getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。

时间: 2024-10-14 21:23:53

html dom对象getElementById()方法的相关文章

html DOM对象getElementByName()方法

定义和用法 getElementsByName() 方法可返回带有指定名称的对象的集合. 语法 document.getElementsByName(name) 该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性. 另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素. 实例 <html> &l

html DOM对象getElementByTagName()方法

定义和用法 getElementsByTagName() 方法可返回带有指定标签名的对象的集合. 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序. 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序. 提示和注释 注释:传递给 getElementsByTag

html DOM对象 open()方法

定义和用法 open() 方法可打开一个新文档,并擦除当前文档的内容. 语法 document.open(mimetype,replace) 参数 描述 mimetype 可选.规定正在写的文档的类型.默认值是 "text/html". replace 可选.当此参数设置后,可引起新文档从父文档继承历史条目. 说明 该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写. 提示和注释 重要事项:调用 open() 方法打

html dom对象close()方法

定义和用法 close() 方法可关闭一个由 document.open 方法打开的输出流,并显示选定的数据. 语法 document.close() 说明 该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容.如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示. 一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文

分享一个js判断是否是dom对象的方法

//首先要对HTMLElement进行类型检查,因为即使在支持HTMLElement //的浏览器中,类型却是有差别的,在Chrome,Opera中HTMLElement的 //类型为function,此时就不能用它来判断了 var isDOM = ( typeof HTMLElement === 'object' ) ? function(obj){ return obj instanceof HTMLElement; } : function(obj){ return obj && t

Jquery对象和DOM对象的区别

1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象var $obj = $("#id"); //j

jQuery对象与DOM对象之间的转换

什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用document.getElement*系列的方法返回的就是dom对象. var btn = document.getElementById("btnShowDiv"); var divs = document.getElementsByTagName("div"); dom对象只可以使用dom对象的方法和属性 domObject.innerHTML = "

关于jquery对象和DOM对象的区别

这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所以有空jquery也要好好学习!(列为工作时间之外的任务) 下面摘自某些作者的论述,感觉总结的很到位,分享如下,并作为一个记录! jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象

获取dom对象(1)

<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>获取dom对象</title> <style> #btn3{ border:1px solid red; } #btn33{ border:1px solid blue; } </style> </