• select,table,form


    首先来说select,select是下拉框,select下面有option标签。

    通过document.getElementById我们便能拿到我们想要的select元素,

    或者我们可以直接在内存中创建一个select标签然后对其进行操作,如:

    var select=document.createElement('select');

    for(var i=0;i<arr.length;i++){
    select.appendChild(new Option(arr[i].name,arr[i].id));
    }

    这里的arr是动态数组,这样我们就能将动态的内容传输到下拉框中。

    new Option(a,b)是option的创建方法,前面的a是Option中的内容,后面的b是Option的value值。

    关于下拉框的话也有一个onchange事件来配合使用,就是当点击下拉框中内容是发生的事件。

    然后就是关于table表格

    同样我们可以通过get方法获取到此元素,也可以同过createElement("table")来在内存中创造一个。

    table表格分为thead,tbody,tfoot,我们都可以通过table.createTHead();table.createTBody();table.createTfoot在内存中创建

    一个table中可以包含多个tbody,获取的时候用table.tBodies[i],另外table无法删除tbody

    每个thead也好,tbody也好,下面都是由tr 和td组成的

    insertRow(i)就是在i位置追加一行  insertRow()就是在末尾追加一行,当然都是在tbody或者thead里面进行

    用法:  tbody.insertRow()  获取:.rows    (这里获取的是所有的行)

    td的组成方法:

    insertCell(i)就是在i位置追加一个单元格 insertCell()就是在最后追加一个单元格  

    用法: tr.insertCell()   获取: .cells  同样这里是获取的所有的单元格。

    form表单标签

    form表单标签中可以有input标签,input不同type有不同的用处,比如text 文本框  password 密码  radio 单选按钮 checkbox单选框 button按钮 submit 提交按钮  reset 重置按钮

    select标签页经常放在表单里面使用,以及textarea文本域,

    form表单的dom操作:

    var form=document.form[i/id/name];这是找到整个dom树中所有的form表单,然后通过下标,id,name其中一个来选中并赋值给我们创建的变量

    var elem =form.elements[i/id/name];这是通过下标或id或name来选中表单中的元素并赋值给我们创建的变量

    这一个步有个简写方法,我们可以直接通过name属性来找到我们想要的元素 

    var elem=form.name;

    form.length获取表单元素的个数

    方法

    .submit() 将表单手动提交,与普通的button按钮结合使用

    事件

    .onsubmit() 当表单最终提交前触发的事件

  • 相关阅读:
    ASP.NET Core路由中间件[4]: EndpointRoutingMiddleware和EndpointMiddleware
    ASP.NET Core路由中间件[3]: 终结点(Endpoint)
    ASP.NET Core路由中间件[2]: 路由模式
    ASP.NET Core路由中间件[1]: 终结点与URL的映射
    [LeetCode] 994. Rotting Oranges 腐烂的橘子
    [LeetCode] 993. Cousins in Binary Tree 二叉树的表兄弟节点
    [LeetCode] 992. Subarrays with K Different Integers 有K个不同整数的子数组
    [LeetCode] 991. Broken Calculator 损坏的计算器
    [LeetCode] 1143. Longest Common Subsequence 最长公共子序列
    [LeetCode] 990. Satisfiability of Equality Equations 等式方程的可满足性
  • 原文地址:https://www.cnblogs.com/yzxyzx/p/11390442.html
Copyright © 2020-2023  润新知