JavaScript获取HTML控件的四种核心方法详解

接下来进入核心内容。

访问页面控件的核心对象是 document。它代表当前文档的所有子对象，并提供了几种主要方法来获取这些对象。

获取控件的四种核心方法

1. document.getElementById

2. document.getElementsByName

3. document.getElementsByTagName

4. document.all

下面将详细阐述上述几种方法的具体用法。

document.getElementById详解

一、首先介绍 document.getElementById 的用法。

语法为 Var obj=document.getElementById(“ID”)，它根据指定的 ID 属性值获取对象。该方法返回 id 属性值等于指定 ID 的第一个对象的引用。如果存在多个匹配的对象，则返回该组对象中的第一个。

<input name=”a” type=”text” id=”b”/>

<input name=”b” type=”text” id=”a”/>

<input type="button" name="submint1" value="text1" onclick="alert(document.getElementById('b').value)"><input type="button" name="submint2" value="text2" onclick="alert(document.getElementById('a').value)"/>我在IE中测试了上面代码，在第一个文本框中输入1，在第二个文本中输入2，然后点击两个按钮，大吃一惊。结果两个按钮都返回了第一个文本框的值。这说明了IE执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是根据ID来查找的。

相反，在 Firefox 中不存在此问题。Firefox 执行 document.getElementById(elementName) 时，严格查找 ID 等于 elementName 的对象，如果不存在则返回 null。

document.getElementsByName用法

二、接下来看 document.getElementsByName 的用法。

语法为 Var obj=document.getElementsByName(“Name”)，它根据 Name 属性的值获取对象集合。返回 name 等于指定 Name 的所有对象的集合。注意，这里返回的是一个集合，即使只有一个元素，它也是一个集合对象。

可以通过 document.getElementsByName("name")[0?1?2?3?....] 的方式获取集合中的某一个元素。需要注意的是，在 JavaScript 中获取集合的值既可以使用 [] 方括号，也可以使用 () 圆括号（经本人测试可行，但资料中少见此写法）。

例如：

<script>

function prop()

var objs=document.getElementsByName("a");

alert(objs(0).value);//或者可以alert(objs[0].value)也正确的。

</script>

<input type="text" name="a" id="b" value="this is textbox"/>

<input type="button" value="testing" onclick="prop()"/>

document.getElementsByTagName与document.all

三、Document.getElementsByTagName 的用法：

语法为 Var ojbs=document.getElementsByTagName(“Tag”)，它根据指定的元素名称获取对象集合。返回 Tag 属性等于指定 Tag 标记的所有对象的集合。这里同样返回的是一个集合（同上）。

四、document.all 用法。

document.all 是页面内所有元素的一个集合。例如：

document.all(0) 表示页面的第一个元素。

Document.all(“txt”) 表示页面上 id 或 name 等于 txt 的所有对象的单个元素和集合元素。

如果页面上 id 或 name 等于 txt 只有一个元素（包括 name 和 id 情况），那么 document.all() 的结果就只是一个元素；反之，则是获取一个集合（综合了 document.getElementById 和 document.getElementsByName 的各自特点）。

也可以这样写: document.all.txt 是一样的效果。

例如：

<input name=aaa value=aaa>

<input id=bbb value=bbb>

<script language=Jscript>

alert(document.all.aaa.value) //根据name取value

alert(document.all.bbb.value) //根据id取value

</script>

代码 2：

但是常常 name 可以相同（如：用 checkbox 取用户的多项爱好的情况）。

<input name=aaa value=a1>

<input name=aaa value=a2>

<input id=bbb value=bbb>

<script language=Jscript>

alert(document.all.aaa(0).value)//显示a1

alert(document.all.aaa(1).value)//显示a2

alert(document.all.bbb(0).value)//这行代码会失败

</script>

理论上，一个页面中的 ID 是互不相同的。如果出现不同的 tags 而有相同的 id 的话，document.all.id 就会失败，就像这样：<input id=aaa value=a1>

<input id=aaa value=a2>

<script language=Jscript>

alert(document.all.aaa.value)//显示undefined而不是a1或者a2

</script>

所以说遇到了这种情况的话，可以使用下面这种写法：

<input id=aaa value=aaa1>

<input id=aaa value=aaa2>

<input name=bbb value=bbb>

<input name=bbb value=bbb2>

<input id=ccc value=ccc>

<input name=ddd value=ddd>

<script language=Jscript>

alert(document.all("aaa",0).value)

alert(document.all("aaa",1).value)

alert(document.all("bbb",0).value)

alert(document.all("bbb",1).value)

alert(document.all("ccc",0).value)

alert(document.all("ddd",0).value)

</script>

利用document.all判断浏览器类型

另外，document.all 可以用来判断浏览器的种类是否是 IE。

document.all---------针对IE

document.layers------------针对Netscape

这两个集合.all 只在 ie 里面有效，layers 只在 nc 里面有效。

所以就可以通过这个方式来判断不同的浏览器。