这种在上高级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. C#简单委托示例——让你一看就会的demo

    委托 1. 什么是委托? 委托就是具有相同签名和返回值类型的有序方法列表 它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递 是一种引用类型 方法的列表称为调用列表 当委托被调用时,它调 ...

  2. 【.NET Core项目实战-统一认证平台】第十三章 授权篇-如何强制有效令牌过期

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上一篇我介绍了JWT的生成验证及流程内容,相信大家也对JWT非常熟悉了,今天将从一个小众的需求出发,介绍如何强制令牌过期的思路和实现过程. ...

  3. 第10章 使用密码保护API - Identity Server 4 中文文档(v1.0.0)

    OAuth 2.0资源所有者密码授权允许客户端向令牌服务发送用户名和密码,并获取代表该用户的访问令牌. 除了无法承载浏览器的旧应用程序之外,规范通常建议不要使用资源所有者密码授予.一般来说,当您要对用 ...

  4. .net core mvc 区域路由设置（配置）

    写博客原因:添加了区域(用作后台)后,报错: An unhandled exception occurred while processing the request.AmbiguousActionE ...

  5. docker修改国内官方镜像

    在正常情况下,docker有一个默认连接的国外官方镜像,在国外的网友访问该官方镜像自然不成问题,但是国内毕竟不是国外,由于国情不同,中国的网络访问国外官方镜像网速一向很慢,而且往往还会遭遇断网的窘境, ...

  6. PhpStorm 安装ApiDebugger

    ApiDebugger,是一个开源的接口调试IntelliJ IDEA插件,具有与IDEA一致的界面,无需切换程序即可完成网络API请求,让你的code更加沉浸式. 安装 File->Setti ...

  7. [LeetCode] 1. Two Sum 两数之和

    Part 1. 题目描述 (easy) Given an array of integers, return indices of the two numbers such that they add ...

  8. 设计模式之一工厂方法模式（Factory Method）

    工厂方法模式分为三种: 一.普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建.首先看下关系图: 举例如下:(我们举一个发送邮件和短信的例子) 首先,创建二者的共同接口: pub ...

  9. Arcgis瓦片--js客户端加载

    接上篇博客,下载好arcgis格式的瓦片数据以后,需要用js客户端在前端加载出来.这里介绍两种方案: 1.使用超图iServer将瓦片发布成rest地图服务,或者arcgis地图服务,客户端直接加载 ...

  10. OpenCL：图像处理基础note

    使用图像对象的理由 虽然对于图像也可以把它的像素数据当做一般的缓存数据来处理,但是如果把它当做图像来处理有如下好处: 在GPU中,图像数据是保存在特殊的全局内存中,即纹理内存,它和一般的全局内存不相同 ...