getElementById 与 getElementsByTagName 详解

最新推荐文章于 2022-12-28 10:53:25 发布

hx_0503

最新推荐文章于 2022-12-28 10:53:25 发布

阅读量1.5k

点赞数 1

分类专栏： javascript 文章标签： javascript input textbox action xhtml 服务器

本文链接：https://blog.youkuaiyun.com/hx_0503/article/details/5018348

版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

网上有些哥们写了,但是总感觉不够详细.摘录一些他们的文章再加上自己试验的一些代码.

getElementById( "xxx ") 返回第一个 id属性为 "xxx " 或者特定表单元素name为 "xxx "的元素
getElementsByName( "xxx ") 返回所有 id属性为 "xxx " 或者特定表单元素name为 "xxx "的元素

这里要说明一下其实getElementById和getElementsByName取元素的范围是一样的
区别只是前者只返回第一个元素后者返回所有元素的集合

另外说明一下表单元素表单元素指的是在 <FORM> 标签中数据可以被提交给服务器的标签
主要有 <INPUT> <SELECT> <TEXTAREA> 三个标签这三个标签只有在name属性不为空的时候才能将数据提交给服务器所以这三种标签多定义了一个name属性其实这个name属性和id属性是完全一样的都可以定位元素

如果不是表单元素就算加了name属性 getElementsByName也取不到

<BODY>
<ul>
<li id= "li1 "> 123 </li>
<li id= "li2 "> 456 </li>
</ul>

...
<script language= "javascript ">
var o = document.getElementById( "li1 ");
alert(o.innerText); //返回 123

var o = document.getElementsByTagName( "li ");
for( var i=0;i <o.length;i++){
alert(o[i].innerText); //返回 123 和 456
}

</script>
</BODY>

getElementById:

document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！

参考资料：

1. document . getElementById 的用法和 DHTML.CHM 的下载地址

今天在网络上查找 document . getElementById 的用法，如下：

A ：语法：

oElement = document . getElementById ( sID )

参数：

sID : 必选项。字符串 (String) 。

返回值：

oElement : 对象 (Element) 。

说明：

根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。

如果无符合条件的对象，则返回 null 。

B ：有一个例子可以很好的说明：

****************************************************************************

* *

* 这个函数中最关键的地方是 document.getElementById ，他是什么呢？ *

* *

* 关于 document.getElementById ，是这样的： *

* *

* 如： document.getElementById('hdrPageHeader_lblTitle') *

* *

* 表示的意思是：获取 ID 为 :hdrPageHeader_lblTitle 的对象 *

* *

* <a >aa</a> *

* <a >bb</a> *

* <a >cc</a> *

* <script language="javascript"> *

* <!-- *

* var idtext=document.getElementById('hdrPageHeader_lblTitle') *

* alert(idtext.innerText) *

* //--> *

* </script> *

C ：另外还得到一个细节：

① document.getElementById 有时会抓 name 放过了 id ，据说是 IE 的一个 BUG ；

页面中有

试验的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>