这种在上高级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. JAVA Swing 改变标题栏左上角默认咖啡图标

    前言 最近使用Java的swing开发了一个小程序,想要实现改变标题栏左上角的图标,找了网上的资料,经过了一个下午的尝试,都是未能成功,最后,终于是在Java的一本书上找到了结果 我只能说,网上的东西 ...

  2. Java中float型最大值大于long型？

    float型在内存中占用的是4个字节的空间,而long型占用的是8个字节的空间. 注:float类型的范围是:一3.403E38~3.403E38.而long类型的范围是:-2^63~2^63-1(大 ...

  3. Linux下GitLab服务器搭建

    系统环境 操作系统:CentOS6.9关闭防火墙 安装步骤 1. 安装Postfix 2. 下载rpm包并安装 3. 配置gitlab,vim /etc/gitlab/gitlab.rb,指定ip+端 ...

  4. 前端项目git操作命名规范和协作开发流程

    前言 一个项目的分支,一般包括主干 master 和 开发分支 dev,以及若干临时分支 分支命名规范 分支: 命名: 说明: 主分支 master 主分支,所有提供给用户使用的正式版本,都在这个主分 ...

  5. 【20190405】JavaScript-整理一些常用正则式

    匹配中文字符: let reg=/([\u4E00-\u9FFF]+)/; //\u代表Unicode编码 匹配电话号码: let reg=/^1[34578]\d{9}$/; 给每三位数字添加一个逗 ...

  6. SAP MM MI01事务代码里的批次确定

    SAP MM MI01事务代码里的批次确定 1 – 批次管理启用之后果 一个物料如果启用了批次管理,那么库存管理以及盘点等诸多事务里都需要在批次的层次上进行. 货物移动的时候,需要在界面上指定相关货物 ...

  7. Xaramin IOS 开发常见问题

    调试时提示找不到obj某某文件,勾选后编译,再取消勾选后再次调试 APP不能上网(而且无法通过配置允许上网的APP,因为根本 找不到需要的APP),不要使用IOS11测试版本,自动禁网 截图路径 %U ...

  8. 前后端分离djangorestframework—— 接入支付宝支付平台

    支付宝 简介 支付宝是什么不用多说了,本次教程适合初学者 前提准备 话不多说,干就完了 1.注册开发者账号,设置公钥私钥 首先进入支付宝开发者平台:传送门 ,有账号直接登录,没账号用你平时用来付款收钱 ...

  9. Ubuntu17.04 sudo apt-get update升级错误

    最近在折腾Ubuntu,安装的是17.04版本的.想安装PHP7.X最新版本,但是要先升级.利用sudo apt-get update命名后,出现了以下报错: 忽略:1 http://cn.archi ...

  10. SQLServer之创建主XML索引

    创建主XML索引注意事项 若要创建主 XML 索引,请使用 CREATE INDEX (Transact-SQL) Transact-SQL DDL 语句. XML 索引不完全支持可用于非 XML 索 ...