二，Select：访问select元素

　　属性：.selectedIndex  获取select中当前选中项的下标

　　　　　.options  获取select中所有的option元素 返回值为数组

　　　　　.options.length  获取option的长度 将其赋值为0 等同于删除所有option

　　　　　.value 当前选中项的值（当选项中有value属性时 获得value属性值 若不存在value值则等同于获取innerHTML值）

　　方法：add() 在select中添加option

　　　　　remove(i) 删除select中下标为i的option

　　事件：onchange 选项发生变化时触发的事件

　　删除select中最后一个option可以使用：select.remove(select.length-1);

三，option：访问option元素

　　创建：new Option(text,value) text表示内容 value表示属性

　　属性：.index 获取当前选项下标

　　　　　.value

　　　　　.text/.innerHTML

　　向select中添加一个option：select.appendChild(new Option(text,value));

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>
　　//创建一个select

    <select name="sel" id="slct" onchange="onchge(this)">

        <option value="1">111</option>

        <option value="2">222</option>

        <option value="3">333</option>

    </select>

    <script type="text/javascript">
　　　　　//给定一个onchange事件

        function onchge(elem){

            // 切换选项输出下标

            console.log(elem.selectedIndex);

            // 输出对应选项value值

            console.log(elem.value);

        }

        // 获取select元素 通过下标

        var select = document.getElementById("slct");

        // 输出select内容

        console.log(select);

        // 获取所有option

        console.log(select.options);

        // 获取select的长度

        console.log(select.length);

        // 等同于上一种获取长度的方式

        console.log(select.options.length)

        // 在select后添加一个option 并赋值

        select.add(new Option("444","4"));

    </script>

</body>

</html>

四，table 访问表格元素

　　1.创建行分组：table.createTHead();

　　　　　　　　table.createTBody();

　　　　　　　　table.createTFoot();

　　2.删除行分组：table.deleteTHead();　　　　　　

　　　　　　　　TBody无法删除,并且一个table可以包含多个tbody

　　　　　　　　table.deleteTFoot();

　　3.获取行分组：table.tHead()

　　4.插入、删除、获取 (行 tr)

　　可以在thead、tbody、tfoot中插入行

　　　　.insertRow(i) 在下标为i的位置插入一行,若不写下标 表示在末尾追加一行

　　　　.deleteRow(i) 删除下标i位置的行

　　　　.rows[i] 获取下标为i的行  获取所有行.rows 返回值为数组

　　5.插入、删除、获取 （单元格 td）

　　　　tr.insertCell(i) 在某一行中下标为i的位置插入一个单元格,若不写下标 表示在末尾追加一个单元格

　　　　tr.deleteCell(i) 删除某一行中下标为i的单元格

　　　　tr.cells[i] 获取下标为i的单元格  获取所有单元格 tr.cells 返回值为数组

　　　　通过这种方式构造表格 无法在tr中添加th

　　　　设置表格样式通过table.style tr.style

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table id="tbl">

    </table>

    <script type="text/javascript">

        // 获取table元素

        var table = document.getElementById("tbl");

        // 设置表格宽度

        table.style.width = "300px"

        // 创建行分组

        var thead = table.createTHead();

        // 创建行row

        var tr = thead.insertRow();

        // 给行设置style

        tr.style.width = "100px";

        tr.style.height = "50px";

        tr.style.backgroundColor = "lightblue";

        // 通过循环创建四个创建单元格

        for (var i = 0; i <4; i++) {

            var td = tr.insertCell();

            // 分别写入内容

            td.innerHTML = i;

        }

        // 

    </script>

</body>

</html>

五，Form 访问表单form元素

　　获取表单：document.forms[i/name/id] 可以通过下标、name属性值、id进行访问

　　获取表单中元素：form.elements[i/name/id]   form.elements 得到表单所有元素 返回值为数组

　　　　元素有name属性时 可直接 from.name属性值获取元素

　　获取元素个数：form.length

　　手动提交表单：form.submit()  和普通button搭配使用

　　事件：onsubmit()  表单提交前自动触发

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form action="" id="frm">

        用户名：<input type="text" name="ipt1">

        密码：<input type="password" name="ipt2">

        <input type="button" name="ipt3" value="提交">

    </form>

    <script type="text/javascript">

        // 获取form元素 通过id

        var form = document.forms["frm"];

        // 获取表单所有元素 返回值为数组

        var input = form.elements;

        // 获取单个元素 通过name属性值

        var ipt1 = form.ipt1;

        // 获取单个元素 通过下标

        var ipt2 = input[1];

        // 给提交按钮绑定事件

        form.ipt3.onclick = function(){

            if (ipt1.value && ipt2.value) {

                // 手动提交 只有当条件满足是才会执行提交操作

                form.submit();

            }

        }

    </script>

</body>

</html>

　　　　

　　

　　

　　

　　　　　

　　　　　

　　　　

javascript--HTML DOM常用元素对象的更多相关文章

  1. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  2. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  3. 【JavaScript】DOM之Document对象

    JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...

  4. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  5. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  6. DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  7. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  8. javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  9. JavaScript：DOM对象

    ylbtech-JavaScript:DOM对象 1. HTML DOM Document 对象返回顶部 1. HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM ...

随机推荐

  1. Android高频单词

    Display 显示 Camera 照相机 Bluetooth 蓝牙 Flash Memory 闪存 Audio 音频 Management 管理 SurFace 界面 Media 多媒体 Frame ...

  2. AnimatorSet学习示例代码

    package com.loaderman.customviewdemo; import android.animation.AnimatorSet; import android.animation ...

  3. SpringBoot集成tk mybatis插入数据，回显主键为null

    实体信息如下 @Data public class ApiCertificate{ @Id @GeneratedValue(generator = "JDBC") private ...

  4. Tools - 关于Network

    Tcpdump homepage - tcpdump wiki - tcpdump Wireshark homepage - wireshark wiki - wireshark Wireshark基 ...

  5. docker安装并持久化postgresql数据库

    安装docker步骤略过 1.拉取postgresql镜像 docker pull postgresql 2.创建本地卷,数据卷可以在容器之间共享和重用, 默认会一直存在,即使容器被删除(docker ...

  6. 【Aizu - 0189】Convenient Location （最短路 Floyd算法）

    Convenient Location 直接翻译了 Descriptions 明年毕业的A为就业而搬家.就职的公司在若干城市都有办公室,不同天出勤的办公室也不同.所以A在考虑住在哪去各个办公室的时长最 ...

  7. 学习docker笔记1

    docker是一个能够把开发应用程序自动部署到容器的开源引擎 docker通过namespace实现了资源隔离,通过cgroups实现了资源限制,通过写时复制机制(copy-on-write)实现了高 ...

  8. linux 网络配置及远程连接

    linux 网络配置及远程连接 前言 本文结合自己的经历主要讲述以Centos7为基础网络配置和远程连接的解决步骤 网络配置: 安装好centos7后,是上不了网的,配置步骤如下: (1).输入命令d ...

  9. 【数据库开发】在Windows上利用C++开发MySQL的初步

    [数据库开发]在Windows上利用C++开发MySQL的初步 标签(空格分隔): [编程开发] Windows上在上面配置环境的基础上开展一个小demo链接数据库,没想到中间也出现了这么多的问题,简 ...

  10. QtCreator中打开.ui文件时卡死崩溃的解决方法

    问题 QtCreator中打开一个项目,在编辑器中打开普通的.cpp或.h等文件正常,构建正常,运行正常,但是打开ui文件(QtCreator自动调用designer)时会卡死然后崩溃退出. 解决方法 ...