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

标签: javascript web开发 html 对象
480人阅读 评论(40) 收藏 举报

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的个数

 

查看评论

ArcGIS for JS基础课程

-
  • 1970年01月01日 08:00

javascript getElementByID,getElementsByName,getElementsByTagName的区别

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

getElementById,getElementsByTagName,getElementsByName,getElementsByClassName的区别

大家有时候会对getElementById,getElementsByTagName,getElementsByName,getElementsByClassName这几个函数理解不小心搞混了,这几个...
  • sinat_24713805
  • sinat_24713805
  • 2016-11-24 16:36:11
  • 2615

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

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

Javascript中getElementById与getElementsByName与getElementsByTagName的不同

 工作了一段时间发现,不少人对Javascript中获取网页中HTML元素getElementById(参数),getElementsByName(参数),getElementsByTagName(参...
  • deadpanda
  • deadpanda
  • 2008-07-18 13:32:00
  • 3225

JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别

Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签: ...
  • qq_25103783
  • qq_25103783
  • 2017-09-27 23:19:22
  • 62

document 方法:getElementsByName()与getElementById()、getElementsByTagName()的区别

document.getElementsByName()    是根据控件名称获取这个控件对象,因为控件名称可以相同,返回的是一个对象数组。    document.getElementById()...
  • zhou191954
  • zhou191954
  • 2015-01-20 10:56:31
  • 2656

document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()

window.onload=function(){ //找到指定id属性值得对象 返回找到的一个对象 var id=document.getElementById("uid"); ...
  • chunxiaqiudong5
  • chunxiaqiudong5
  • 2016-03-24 20:40:08
  • 941

js表单问题之基础浅谈----getElementById和getElementsByTagName

请自行脑补我现在的表情……/生无可恋/ 新手一枚,所以探访知识的道路总会是弯弯曲曲的~ 能认识到的问题是逐渐增多的,只是通过各种路径找到的解决办法不一定能时刻记住,怕自己还会栽在同样的问题上,所以记录...
  • CJKUKU
  • CJKUKU
  • 2016-05-05 15:37:33
  • 1203

getElementById getElementsByName的用法与区别

标签: getElementById  getElementsByName  getElementsByTagName  getElementById:语法: document.getElementB...
  • lixuyuan
  • lixuyuan
  • 2011-07-19 15:57:56
  • 2257
    个人资料
    持之以恒
    等级:
    访问量: 29万+
    积分: 6508
    排名: 4631
    文章分类
    最新评论