• 前端学习笔记之HTML中的id,name,class区别


    name 属性用于在 JavaScript 中对元素进行引用,或者在表单提交之后,对表单数据进行引用。

    html的name和id可以类比身份证的姓名和身份证编号,
    编号id具有唯一性,一个id只出现一次。
    名称name具备可重复性,可以多次出现。


    在css中两者都具备识别html元素的作用,name用点号.表示,id用井号#
    一般name用于通用多次出现元素的样式定义,id用于唯一性元素样式定义。
    在表单当中,由于有些控件具备多元素特性,例如radio checkbox等,使用id不便于表单数据的提交,此外浏览器会根据name来设定发送到服务器的request,因此在表单当中,用name来提交数据。
    当然,在实际的html中,也完全可以不用id,用单独的class也可以起到代替id的作用。但是在js中,是无法通过class直接后去html元素的, 定义id便于相关操作。

    id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以 用数字。table、tr、td、div、p、span、h1、li等元素一般用id。与表单相关的元素也可以赋ID值, 但为这些元素赋ID值的时候引用这些元素的方法就要变一下了,具体的如下:
    赋name时引用元素的方式: document.formName.inputName或document.frames(“frameName”)
    赋id时引用元素的方式: document.all.inputID或document.all.frameID
    除去与表单相关的元素,只能赋id不能赋name,这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等
    对于name和class来说意义是一样的。但是name主要是提交表单用的 ,而class是设置标签的类,用于指定元素属于何种样式的类,主要用来设置css样式的。但两种都可以用来识别css,推荐除了表单外都用class。

    name的用途

    用途1:

    主要是用于获取提交表单的某表单域信息, 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、框架元素(iframe、frame、 window的名字,用于在其他frame或window指定target ) 和button等,这些元素都与表单(框架元素作用于form的target)提交有关,浏 览器会根据name来设定发送到服务器的request, 在表单的接收页面只接收有name的元素, 所以赋ID的元素通过表单是接收不到值的。 我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。在form里面,如果不指定Name,就不会发送到服务器端 。


    用途2:

    HTML元素Input type=’radio’分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。


    用途3:

    建立页面中的锚点,我们知道link是获得一个页面超级链接,如果不用href属性,而改用Name,如:,我们就获得了一个页面锚点。


    用途4:

    作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。


    用途5:

    在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap=”#name”(被关联的MAP元素的Name)。


    用途6:

    某些特定元素的属性,如attribute,meta和param。例如为Object定义参数或Meta中。


    当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在DHTML对象树中,我们可 以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题,当我们动 态创建可包含Name属性的元素时,不能简单的使用赋值element.name = “…”来添加其Name,而必须在创建Element时,使用document.createElement(‘‘)为元素添加Name属性。

  • 相关阅读:
    Python学习笔记——基础篇【第二周】——解释器、字符串、列表、字典、主文件判断、对象
    HashMap、HashTable、ConcurrentHashMap、TreeMap、LinkedHashMap、WeakHashMap区别
    IntelliJ IDEA 控制台中文乱码解决方案
    Java 使用 Redis
    redis.conf 配置项说明
    虚拟机性能监控与故障处理工具
    图解Git
    常用git命令
    设计模式的类型
    使用mybatis插件自动生成代码以及问题处理
  • 原文地址:https://www.cnblogs.com/JetpropelledSnake/p/9123344.html
Copyright © 2020-2023  润新知