getElementById,getElementsByName,getElementsByTagName的区别

1、getElementById

作用:一般页面里ID是唯一的,用于准备定为一个元素 语法: document.getElementById(id) 参数:id :必选项为字符串(String) 返回值:对象; 返回相同id对象中的第一个,按在页面中出现的次序,如果无符合条件的对象,则返回 null

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

2、getElementsByName

作用:按元素的名称查找,返回一个同名元素的数组语法: document.getElementsByName(name)参数:name :必选项为字符串(String)返回值:数组对象; 如果无符合条件的对象,则返回空数组,按在页面中出现的次序

example:document.getElementsByName("name1")[0].value;  //获取想要的相同的name的元素document.getElementsByName("name1")[1].value;
3、getElementsByTagName

作用:按HTML标签名查询,返回一个相同标签元素的数组语法: object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等参数:tagname:必选项为字符串(String),根据HTML标签检索。返回值:数组对象; 如果无符合条件的对象,则返回空数组,按在页面中出现的次序

总结:
1.getElementById返回值是id对象中的第一个2.getElementsByName和getElementsByTagName返回的是数组对象
				
时间: 2024-11-10 00:03:55

getElementById,getElementsByName,getElementsByTagName的区别的相关文章

(4.17)getElementByID,getElementsByName,getElementsByTagName的区别

<form> <input type="checkbox" name="hobby" id="hobby1"/>音乐 <input type="checkbox" name="hobby" id="hobby2"/>登山 <input type="checkbox" name="hobby" id=&quo

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小孩.老人)等. 1. ID 是一个人的身份证号码,是唯一的.所以通过getElementById获取的是指定的一个人. 2. Name 是他的名字,可以重复.所以通过getElementsByName获取名字相同的人集合. 3. TagName可看似某类,getElementsByTagName获取相同类的人集合.如获取小孩这类人,getElementsByTagName("小孩"). 把上面的例子转换到HTML中,如下:

getElementByID,getElementsByName,getElementsByTagName

<input type="checkbox" name="hobby" id="hobby1"> 音乐 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"

Document.getElementById 与 $(&#39;#id&#39;)的区别

一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天才发现并不是这么一回事,通过测试得到: alert($("#box"))得到的是[object Object] alert(document.getElementById("box"))得到的是[object HTMLDivElement] alert($("#box")[0])

玩转DOM遍历——用NodeIterator实现getElementById,getElementsByTagName方法

先声明一下DOM2中NodeIterator和TreeWalker这两类型真的只是用来玩玩的,因为性能不行遍历起来超级慢,在JS中基本用不到它们,除了<高程>上有两三页对它的讲解外,谷歌的学习资料也是甚少(倒是有挺多国外文章)...由于本着不放过任何知识的态度,结合着自己的理解学习了下这两玩意,你们对这两东西了解了解就好~ DOM2级遍历和范围模块定义了两个用于完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker.这两类型基于给定起点对DOM结构执行深度优先先序遍历,兼

认识DOM(上)

认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

DOM对象控制HTML无素——详解1

getElementsByName()方法 返回带有指定名称的节点对象的集合. 语法: document.getElementsByName(name) 与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性. 注意: 1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素. 2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始. 1 <bo

js操作dom对象

属性: 1Attributes     存储节点的属性列表(只读) 2childNodes     存储节点的子节点列表(只读) 3dataType     返回此节点的数据类型 4Definition     以DTD或XML模式给出的节点的定义(只读) 5Doctype     指定文档类型节点(只读) 6documentElement     返回文档的根元素(可读写) 7firstChild     返回当前节点的第一个子节点(只读) 8Implementation     返回XMLD

[转载]页面优化——网页优化

前端是庞大的,包括HTML.CSS.Javascript.Image.Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么 1. 从用户角度而言,优化能够让页面加载得更快.对用户的操作响应得更及时,能够给用户提供更为友好的体验. 2. 从服务商角度而言,优化能够减少页面请求数.或者减小请求所占带宽,能够节省可观的资源. 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用. 前端优化的途径有很多,按粒度大致可以分为两类,第一