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

最新推荐文章于 2024-08-14 16:53:41 发布
最新推荐文章于 2024-08-14 16:53:41 发布
阅读量2.3k 收藏 1
点赞数
文章标签： javascript web开发 html 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h273979586/article/details/75948193
版权

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"οnclick="getValue();">这是标题1</h1>

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

<input type="text"name="name1" id="name2" value="表单中的值"οnclick="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"οnclick="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"οnclick="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的个数

 

LailaiMonkey
关注
JS-DOM/getElementsByName()方法/getElementsByTagName()方法/区别getElementByID,getElementsByName,getEleme......
Jennyni1122的博客
06-14 1654
DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 image.png 将HTML代码分解为DOM节点层次图: image.png HTML文档可以说由节点构成的集合，三种常见的DOM节点: 元素节...
javascript getElementsByName()的用法说明
10-29
当页面上的控件同名且多个的时候,你首先做的是什么?判断长度?的确,从程序的严密角度出发,我们是需要判断长度,而且有长度和没长度是两种引用方法.
JS中getElementById()、getElementsByName()、getElementsByTagName()_的区别和应用
OuErHuiLaiKanKan的博客
06-29 1000
JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用   getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 语法：document.getElementByIdx_x_x(id) getElementsByName() 方法可返回带有指定名称
JavaScript getElementById 使用方法
最新发布
小楼一夜听春雨，深巷明朝卖杏花
08-14 1770
在JavaScript中，document.getElementById()是一种用于通过元素的id属性获取DOM元素的方法。它的作用是返回与指定id匹配的HTML元素。使用document.getElementById()可以通过元素的id属性直接获取该元素的引用，在标签上定义一个ID，然后JS基于这个ID去调用它。然后可以使用该引用对元素进行各种操作。(1) 修改元素的内容或属性。(3)获取表单元素的值。(2)添加事件监听器。
getElementById()与getElementsByName()区别
johncools的博客
07-10 1606
HTML元素的Name属性在页面中可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。    要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本
9-2getElementsByName()方法
dada678的专栏
06-30 344
返回带有指定名称的节点对象的集合。 语法： document.getElementsByName(name) 与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。 注意: 1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
JavaScript中getElementsByName
weixin_47511190的博客
07-12 1058
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //document.getElementsByName根据指定的name属性查询返回多个标签对象的集合 //这个集合的操作和数组一样 //集合中每个元素都是dom对象
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
09-06
在HTML文档对象模型（DOM）中，有三种主要方法用于查找HTML元素：`document.all`，`getElementById()`，`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景，理解它们的区别对于编写...
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页
09-06
本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合，它包含了HTML文档中所有的元素，...
JavaScript getElementsByName()方法介绍
路虽远，行则必至！
06-25 3万+
getElementsByName() 根据 name 属性获取一组元素节点对象 getElementsByName()可以根据 name 属性获取一组元素节点对象，该方法所有浏览器均可使用 注意：这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，如下图： 我们若要查找具体元素，就必须使用索引，如下图： 我们可以通过 length 属性，获取其长度，如下图： 我们可以...
getElementById和getElementsByName的细节介绍。。。
和谐的望天
12-04 1520
document.getElementById(xx)是取一些ID为xx的元素对象（DOM对象）不过IE和FireFox里会有差距，因为IE也取name=xx的元素。。比如下面的代码IE和Opera里显示的是1FireFox里显示的则是2-->24var o = document.getElementById("wc");alert(o.innerHTML || o.value); //即2doc
JavaScript getElementById()方法介绍
热门推荐
路虽远，行则必至！
06-25 5万+
getElementById() 根据元素的 id 属性获取一个元素节点对象 getElementById()可以根据元素的 id 属性获取一个元素节点对象，该方法所有浏览器均可使用 返回带有指定 ID 的元素，如下图： 我们可以通过 innerHTML 属性(获取或者设置元素的内容(包含 HTML 标签 解析))，如下图： 我们可以通过 innerText 属性(获取或者设置元素的内容 ...
js中getElementById()的用法
第十七签
05-15 7231
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Switch/Case handling</title> <!--<script src="js/switch.js"></script>--> <script> window.onload=in
getElementsByName和getElementById
先尽人事，后听天命
11-22 1148
  getElementById()和getElementByName()有什么区别？2007-02-24 18:20
JS的getElementsByName()
shengzhu1的博客
03-10 590
之前用过getElementById()函数，直接调用某个元素的Id，即可以进行后续的操作，但是换了Name之后就有幺蛾子了 - getElementsByName()是Elements，而不是Element，写函数的时候要注意一下 - getElementsByName()的数据要访问时，要加下标document.getElementsByName("task_id")[0].value =
JS中的getElementsByName的用法
u013313232的博客
09-28 2284
getElementsByName的用法 全选的代码 function checkAll() { //让复选框都选中 var hobbies = document.getElementsByName(“hobby”); //alert(hobbies[0].checked); for (var i=0; i<hobbies.length; i++){ hobbies[i].checked = true; } } input的内容 兴趣爱好: <input type=“checkbox” .
js中getElementById
Y_JY
07-17 554
var flag = true; function changeLink(){ var link = document.getElementById("myLink");// if(flag){ link.innerHTML = "sina"; link.href = "http://www.sina.com"; flag = false; }else{ link.in
getElementById( ) 方法
m0_57835615的博客
05-28 6523
1.getElementById( )方法 getElementById() 方法返回带有指定 ID 的元素 语法格式：
JavaScript选择器：getElementById
cungui5726的博客
08-24 805
One of the earliest and most fundamental means of referencing an element in JavaScript, getElementById is very frequently used to “latch onto” an element for manipulation. getElementById是引用JavaScript中...
评论 41
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值