这种在上高级WEB课时，老师为表单元素赋了name值，之后直接在JS中使用该值而不需要使用document.get...来获取了，例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form name="test">
        <input type="text" name="txt" value="这是一个测试">
    </form>

    <script type="text/javascript">
        console.log(document.test);
        console.log(document.test.txt.value);
    </script>
</body>
</html>

结果如下

当第二个测试使用document.txt.value时，会产生错误提示，故使用表单元素的name时应该按DOM树的父子关系进行调用。

另，写随笔前去百度+谷歌了一下，发现并未有人讨论关于这个name的使用，不知道为什么。

今天测试代码的时候，发现在js中未获取元素id时，可直接使用id来得到元素或对其进行DOM操作，例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #test{
            background: #ccc;
        }
        div>div{
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div id="test">
        <p id="myP">这是原来的信息</p>
    </div>

    <script type="text/javascript">
        myP.innerHTML = "这是新的信息";
        console.log(test.style.background);console.log(test.style);
        test.appendChild(document.createElement('div'));
    </script>
</body>
</html>

这是结果：

在打印test的background时，打印了一片空白，我猜测直接使用id时，不能对其进行复杂的使用。

带着疑问前去百度了一番，发现在mrcxt的一篇博客中有一些研究。简单来说就是该方式使用id并非js规范，不推荐使用，将来不知是否还是支持。

关于表单元素的name及HTML中的id的更多相关文章

  1. 前端笔记之React（二）组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  2. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  3. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  4. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  5. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  7. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  8. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  9. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

随机推荐

  1. Linux和Shell回炉复习系列文章总目录

    本页内容都是本人回炉Linux时整理出来的.这些文章中,绝大多数命令类内容都是翻译.整理man或info文档总结出来的,所以相对都比较完整. 本人的写作方式.风格也可能会让朋友一看就恶心到直接右上角叉 ...

  2. [转]nodeJs--koa2 REST API

    本文转自:https://blog.csdn.net/davidPan1234/article/details/83413958 REST API规范编写REST API,实际上就是编写处理HTTP请 ...

  3. Java开发笔记（三十四）字符串的赋值及类型转换

    不管是基本的char字符型,还是包装字符类型Character,它们的每个变量只能存放一个字符,无法满足对一串字符的加工.为了能够直接操作一连串的字符,Java设计了专门的字符串类型String,该类 ...

  4. arcgis api 3.x for js 入门开发系列十二地图打印GP服务（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. 上海启动5G试用！104页PPT，为你深度解析5G终端的创新和机遇

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 来源:国泰君安证券 作者:分析师王聪.张阳.陈飞达 导读:2019年是5G元年,各大品牌将陆续推出5G ...

  6. Android studio设置文件头，定制代码注释

    一.说明 在下载或者看别人的代码我们常会看见,每一个文件的上方有个所属者的备注.如果要是一个一个备注那就累死了. 二.设置方法 File >>> Setting >>&g ...

  7. 《Flask Web开发》学习笔记

    第一部分 Flask简介 前言:想熟练掌握一门web框架,为以后即将诞生的测试工具集做准备.为什么选择flask要做熟练掌握的一门框架,而不是其他的,最主要的原因是可以随意定制. 特别提醒:这本书的代 ...

  8. 安卓基础之通过Intent跳转Activity

    通过Intent跳转Activity   一.通过意图开启Activity的方式:   隐式意图:通过指定一组数据或者动作实现 Intent intent=new Intent(); intent.s ...

  9. matlab练习程序（渲染三原色）

    这里我用的空间是x向右为正,y向下为正,z向屏幕里面为正.相当于标准右手系绕x轴旋转了180度. 将三个点光源放在 r = [0.3,0,0.5];g = [0.3,-0.5*cos(pi/6),-0 ...

  10. base64文件大小计算

    有时候图片被base64之后需要计算图片大小,因为被编码后全是字符,计算文件大小可以反序列化成文件之后再获取大小,但是会比较麻烦.简单介绍一种利用base64编码原理计算大小的方法. 编码原理 要求把 ...