这种在上高级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. SpringBoot整合系列-整合SpringMVC

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9984607.html SpringBoot整合Spring MVC 步骤 第一步:添加必 ...

  2. Angularjs进阶笔记（2）-自定义指令中的数据绑定

    有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...

  3. tomcat 大并发报错 Maximum number of threads (200) created for connector with address null and port 80

    1.INFO: Maximum number of threads (200) created for connector with address null and port 80 说明:最大线程数 ...

  4. [android] 创建模拟器遇到的常见错误

    1.错误提示: invalid command line sdk安装目录有中文添加ANDROID_SDK_HOME环境变量,指向sdk安装目录2.模拟器无法安装应用模拟器开启其实是开启了的程序占用这个 ...

  5. 数据结构（java版）学习笔记（三）——线性表之单链表

    单链表的优点: 长度不固定,可以任意增删. 单链表的缺点: 存储密度小,因为每个数据元素,都需要额外存储一个指向下一元素的指针(双链表则需要两个指针). 要访问特定元素,只能从链表头开始,遍历到该元素 ...

  6. Linux CentOS设置定时重启：crontab

    上一篇介绍了 开机自启动chkconfig命令  https://www.cnblogs.com/prefectjava/p/9399470.html 本篇介绍 crontab 设置定时任务,并且把 ...

  7. WEB前端学习代码片段记录

    1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return thi ...

  8. Dynamics CRM教程:图表的Top设置及导出修改和导入

    关注本人微信和易信公众号: 微软动态CRM专家罗勇,回复144或者20150412可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 上一篇博客制作的图表放在Dashb ...

  9. iOS 10 设备权限问题（相机，相册等）

    iOS 10 的设备权限 需要添加的字段有: <!-- 相册 --> <key>NSPhotoLibraryUsageDescription</key> <s ...

  10. ionic获取表单input的值的两种方法

    1.参数传递法 直接在input处使用 #定义参数的name值,注意在ts中参数的类型 html页面: <ion-input type="text" placeholder= ...