getElementByName, getElementById, getElementByTag 的用法

2024-01-07 14:48

本文主要是介绍getElementByName, getElementById, getElementByTag 的用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

getElementByName不存在
只有getElement__S__ByName 和 getElementById

byId的时候,会根据html元素的id属性,根据规范id应当是唯一的,用来标示一个element,比如<td>, <div> ......。所以返回唯一元素句柄或者null。对于表单控件<input><select><textarea>等,在不指定id的时候,name也会被视作id,比如<input type="text" name="abc" value="123">也可以用document.getElementById("abc")来获取

而byName,从名字上看,就可以知道,它返回的是复数个对象。它根据name属性(name可以重复),得到所有name属性与参数相同的控件组成的数组,不存在时,返回0长度数组(.length == 0,而不是null)
比如
<input type="text" name="abc" value="1">
<input type="text" name="abc" value="2">
<input type="text" name="abc" value="3">

var array = document.getElementsByName("abc");
if (array.length == 0) {
alert("Error");
return;
}

for (var i = 0; i < array.length; i++) {
alert(array[i].value);
}
 
 
当页面上的控件同名且多个的时候,你首先做的是什么?判断长度?的确,从程序的严密角度出发,我们是需要判断长度,而且有长度和没长度是两种引用方法.我们来看:
oEle= document.all.aaa ;//这里有一个aaa的对象,但我们不知道它现在长度是多少,所以没办法对它操作.因此,我们要先做判断长度的过程.如下:
if(oEle.length){}else{};
在两种情况下,花括号里面的内容写法也是不一样的:
if(oEle.length){
   for(var i = 0 ;i<oEle.length;i++){
      oEle[i].value........
  }
}
else{
     oEle.value........
};

但是这样写是不是太复杂了点?而且当花括号里面的代码比较多的时候,我们要写两遍代码,晕了先~
还好有document.getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用:
oEle = document.getElementsByName('aaa')来引用
当oEle只有1个的时候,那么就是oEle[0],有多个的时候,用下标法oEle[i]循环获取,是不是很简单?

值得一提的是它对Name和ID的同样有效的.
但是它只能应用到document对象.相对应的,还有另一个方法,可以应用的对象会更广一点:
getElementsByTagName,比如我知道了一个<DIV ID='aaa'><input/><input/>......</DIV>
我要取DIV里面的所有input,这样写就可以了:aaa.getElementsByTagName('INPUT'),这样就有效的可以和别的DIV(比如说有个叫bbb的DIV,里面的也是一样的input)相区别.
同getElementsByTagName相对应,还有一个document.body.all.tags(),能用这个方法的对象比getElementsByTagName要小得多.但比getElementsByName要多.
到这里我们还要提一下getElementById,它也是只有document对象才能使用,而且返回的是数组的第一个元素,呵呵,它的方法名都写明了是getElement而不是getElements,所以,千万不要搞浑了.

 

这篇关于getElementByName, getElementById, getElementByTag 的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/580269

相关文章

bytes.split的用法和注意事项

当然,我很乐意详细介绍 bytes.Split 的用法和注意事项。这个函数是 Go 标准库中 bytes 包的一个重要组成部分,用于分割字节切片。 基本用法 bytes.Split 的函数签名如下: func Split(s, sep []byte) [][]byte s 是要分割的字节切片sep 是用作分隔符的字节切片返回值是一个二维字节切片,包含分割后的结果 基本使用示例: pa

UVM:callback机制的意义和用法

1. 作用         Callback机制在UVM验证平台,最大用处就是为了提高验证平台的可重用性。在不创建复杂的OOP层次结构前提下,针对组件中的某些行为,在其之前后之后,内置一些函数,增加或者修改UVM组件的操作,增加新的功能,从而实现一个环境多个用例。此外还可以通过Callback机制构建异常的测试用例。 2. 使用步骤         (1)在UVM组件中内嵌callback函

这些ES6用法你都会吗?

一 关于取值 取值在程序中非常常见,比如从对象obj中取值 const obj = {a:1b:2c:3d:4} 吐槽: const a = obj.a;const b = obj.b;const c = obj.c;//或者const f = obj.a + obj.b;const g = obj.c + obj.d; 改进:用ES6解构赋值

2021-8-14 react笔记-2 创建组件 基本用法

1、目录解析 public中的index.html为入口文件 src目录中文件很乱,先整理文件夹。 新建components 放组件 新建assets放资源   ->/images      ->/css 把乱的文件放进去  修改App.js 根组件和index.js入口文件中的引入路径 2、新建组件 在components文件夹中新建[Name].js文件 //组件名首字母大写

Cmake之3.0版本重要特性及用法实例(十三)

简介: CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP14系统攻城狮入门视频实战课 🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧

关于断言的部分用法

1、带变量的断言  systemVerilog assertion 中variable delay的使用,##[variable],带变量的延时(可变延时)_assertion中的延时-CSDN博客 2、until 的使用 systemVerilog assertion 中until的使用_verilog until-CSDN博客 3、throughout的使用   常用于断言和假设中的

ExpandableListView的基本用法

QQ上的好友列表在Android怎么实现,有一个最简单的方法,那就是ExpandableListView,下面简单介绍一下ExpandableListview的用法。 先看看效果图,没有找到大小合适的图片,所以凑合着看吧。     一、准备工作(界面,和需要的数据)             <? xml   version = "1.0"   encoding =

Hbase 查询相关用法

Hbase 查询相关用法 public static void main(String[] args) throws IOException {//Scan类常用方法说明//指定需要的family或column ,如果没有调用任何addFamily或Column,会返回所有的columns; // scan.addFamily(); // scan.addColumn();// scan.se

BeanUtils.copyProperties()在不同包下,用法不同!!! 切记!!!

用法一: 在import org.springframework.beans.BeanUtils;包下: <span style="white-space:pre"> </span>//赋值vo对象的值到po中 <span style="white-space:pre"> </span>/** <span style="white-space:pre"> </span>* <spa

Mybatis注解用法

MyBatis(八) mybatis注解 一、mybatis简单注解 1、@Select、@Results、@Result2、@Delete、@Param、@ResultMap3、@Insert、@SelectKey4、@Delete、@Param5、@Update二、动态SQL 1、简单处理,直接使用``脚本2、使用Provider注解标识 2.1、创建Provider类2.2、注解使用Prov