前端学习笔记之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属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2119464的专栏

前端基本内容概述

9510
来自专栏用户2119464的专栏

字节跳动前端面试经历及总结

你好,我是星辉,幸会幸会。 今天我参加了字节跳动的前段视频第一次面试,把它记录总结下来,希望能够对大家带来帮助。

1.3K20
来自专栏用户2119464的专栏

前端项目知识点总结

19220
来自专栏大愚Talk

后端开发者从零做一个移动应用(一)

一直以来想要学习一些前端的知识,扩宽自己的技术栈,但是一直以来对前端都是进行了解,没有用一个产品把这些东西给展示出来。最近终于痛定思痛,做了一个 android...

15530
来自专栏acoolgiser_zhuanlan

JavaScript 在vue页面下实现鼠标拖拽div改变其大小,适用于鹰眼地图,街景地图等。

首先看效果,如图,鼠标悬浮在地图的右上角小框中时,提示“拖动调整大小”,可以给小框加个好看的图标。点击可以进行拖拽。

79440
来自专栏业余草

Ext4.0中window窗体使用详解(常用属性)

<link rel="stylesheet" type="text/css" href="<%= path %>/extJs/resources/css/ext...

44010
来自专栏用户2119464的专栏

字节跳动前端实习面经

viewport 是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,...

34920
来自专栏方亮

一种准标准CSV格式的介绍和分析以及解析算法

        CSV是一种古老的数据传输格式,它的全称是Comma-Separated Values(逗号分隔值)。出生在那个标准缺失的蛮荒年代,CSV的标准...

16840
来自专栏前端达人

前沿动态 | 带你提前体验CSS未来的新特性

本篇文章,Rachel Andrew将会带着大家了解下浏览器在CSS方面的未来动向, 例如Flexbox行和列布局支持gap间隙属性的标准。

18460
来自专栏用户2119464的专栏

HTML4+CSS2基础考试-易错点总结

18050

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励