关闭

JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用

标签: javascriptweb开发html对象
413人阅读 评论(39) 收藏 举报

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

 

语法:document.getElementByIdx_x_x(id)

 

getElementsByName() 方法可返回带有指定名称的对象的集合

 

语法:document.getElementsByName(name)

 

 

两者的不同点:

 

(1)该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。

 

(2)因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

 

 

 

getElementsByTagName_r() 方法可返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。

 

语法:document.getElementsByTagName_r(tagname)

 

提示:

 

(1)如果把特殊字符串 "*" 传递给 getElementsByTagName_r() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

 

(2)传递给 getElementsByTagName_r() 方法的字符串可以不区分大小写。

 

 

 

 

 

例子1:

 

<html>

<head>

<scripttype="text/javascript">

function getValue()

{

var x=document.getElementByIdx_x_x("myHeader");

alert(x.innerText);

//alert(x.innerHTML); 

}

 

function getValue2(){

 //varn=document.getElementByIdx_x_x("name1");

 varn=document.getElementByIdx_x_x("name2"); 

 alert(n.value);  

}

 

 

 

function id(x) {

  if(typeof x == "string")

 

    return document.getElementByIdx_x_x(x);

 

 

    return x;

  }

 

</script>

</head>

<body>

 

<h1 id="myHeader"onclick="getValue();">这是标题1</h1>

<p>点击标题,会提示出标题1的值。</p>

<input type="text"name="name1" id="name2" value="表单中的值"onclick="getValue2();"/>

<p>点击表单框,会提示出表单中的值。</p>

 

 

</body>

</html>

 

 

 

例子2:

 

<html>

<head>

<scripttype="text/javascript">

function getElements()

  {

  varx=document.getElementsByName("myInput");

 alert(x.length);

  }

</script>

</head>

<body>

 

<input id="myInput" type="text" size="20"/><br />

<input id="myInput" type="text" size="20"/><br />

<input id="myInput" name="myInput11" type="text"size="20" /><br />

<input id="myInput11" name="myInput" type="text"size="20" /><br />

<br />

<input type="button"onclick="getElements()"

value="How many elements named'myInput'?" />

 

</body>

</html>

 

 

例子3:

 

<html>

<head>

<scripttype="text/javascript">

function getElements()

  {

 //var x=document.getElementsByTagName_r("input");

  varx=document.getElementByIdx_x_x("d").getElementsByTagName_r("input");

 alert(x.length);

 

 //getElementsByTagName_r() 方法获取文档中的一个特定的元素

  varmyParagragh = document.getElementsByTagName_r("input")[3];

 alert(myParagragh.value)

 

  }

</script>

</head>

<body>

<div id="d">

<input name="myInput"type="text" size="20" /><br />

<input name="myInput"type="text" size="20" /><br />

<input name="myInput"type="text" size="20" /><br />

<br />

<input type="button"onclick="getElements()"

value="How many input elements?"/>

 

<input type="submit"value="提交" />

</div>

 

</body>

</html>

 

getElementById:

语法:document.getElementByIdx_x(id)

参数: id :必选项为字符串(String)

返回值:对象; 返回相同id对象中的第一个,如果无符合条件的对象,则返回null

example:document.getElementByIdx_x("id1").value;

getElementsByName:

语法:document.getElementsByName(name)

参数: name :必选项为字符串(String)

返回值:数组对象; 如果无符合条件的对象,则返回空数组

example:document.getElementsByName("name1")[0].value;

document.getElementsByName("name1")[1].value;

 

getElementsByTagName:

语法:object.getElementsByTagName_r(tagname) object可以是document或event.srcElement.parentElement等

参数: tagname:必选项为字符串(String)

返回值:数组对象; 如果无符合条件的对象,则返回空数组

example:document.getElementsByTagName_r("p")[0].childNodes[0].nodeValue;

document.getElementsByTagName_r("p")[1].childNodes[0].nodeValue;

--------------------------------------------------------------------------------

getElementsByTagName_r() 不只是用在全局,更多的用法是:

obj.getElementsByTagName_r();

obj可以是任何对象。

--------------------------------------------------------------------------------

var all =document.getElementsByTagName_r('div')[0].getElementsByTagName_r('*');

就是取document.getElementsByTagName_r('div')[0]这个节点下边的所有。

准确的说应该是所有Element类型的节点,不包括TextNode类型的节点。

getElementsByTagName_r('*') *就像通配符一样,表示所有的TagName。

--------------------------------------------------------------------------------

document.getElementsByTagName_r('ul')[0].childNodes就是li的数组

它的长度就是li的个数

 

0
0
查看评论
发表评论
* 以上用户言论只代表其个人钱柜娱乐开户,不代表CSDN网站的钱柜娱乐开户或立场

querySelector和getElementById性能分析与使用选择

记得我们在jquery里面得到一个元素要比直接使用javascript中的document.getElementById()等方法好用多了。随着现在浏览器的发展,目前几乎主流浏览器均支持了他们。包括 ...
  • hualimeme
  • hualimeme
  • 2015-03-18 15:22
  • 7896

js浏览器兼容问题总结及解决办法

javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下...
  • comeonJ
  • comeonJ
  • 2014-02-19 10:44
  • 8670

用#id取得的jQuery对象与document.getElementByIdid所得到的DOM对象区别

转载于: 贤心博客 用#id作为选择符取得的是jQuery对象而并非是document.getElementById(’id’)所得到的DOM对象,两者并不等价。 var $cr=$('#...
  • a1943206465
  • a1943206465
  • 2017-02-06 15:02
  • 2474

getElementByID getElementsByName getElementsByTagName的区别和总结 +js+Mxl+xmlhttp

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:1、getEl...
  • davidxj
  • davidxj
  • 2011-07-11 14:07
  • 743

getElementByID() getElementsByName() getElementsByTagName()的区别

getElementByID() getElementsByName() getElementsByTagName_r()的区别 Web标准下可以通过getElementById(), ge...
  • QTFYING
  • QTFYING
  • 2016-06-01 14:44
  • 353

getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别

在《Javascript DOM 编程艺术》与 W3school 中是这样定义的: getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。 下面这个案例...
  • tashanhongye
  • tashanhongye
  • 2017-05-28 20:05
  • 767

javascript getElementByID,getElementsByName,getElementsByTagName的区别

getElementByID,getElementsByName,getElementsByTagName区别注意:方法区分大小写!以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、...
  • baidu_32731497
  • baidu_32731497
  • 2016-06-30 22:37
  • 3639

getElementByID和getElementsByName和getElementsByTagName和document.all的区别

document.all与document.getElementsByName区别 当页面上的控件同名且多个的时候,从程序的严密角度出发,需要判断长度,而且有长度和没长度是两种引用方法. oEle...
  • msg_java2011
  • msg_java2011
  • 2012-01-13 15:34
  • 640

document.getElementsByName()与 document.getElementById()、document.getElementsByTagName()的区别

document.getElementsByName() 是根据控件名称获取这个控件对象,因为控件名称可以相同,返回的是一个对象数组。 document.getElementById() ...
  • sabic
  • sabic
  • 2011-12-05 09:03
  • 1968

getElementByID getElementsByName getElementsByTagName用法详解

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签: 1、getE...
  • fox123871
  • fox123871
  • 2011-07-18 16:33
  • 2545
    个人资料
    • 访问:281632次
    • 积分:5585
    • 等级:
    • 排名:第5476名
    • 原创:64篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1677条
    文章分类
    最新评论