二，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. 判断Activty是否在前台运行

    /** * 判断某个界面是否在前台 * * @param context * @param className 某个界面名称 * */ public static boolean isActivity ...

  2. 你真的懂wait、notify和notifyAll吗

    生产者消费者模型是我们学习多线程知识的一个经典案例,一个典型的生产者消费者模型如下: public void produce() { synchronized (this) { while (mBuf ...

  3. （七）UML之用例图

    用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...

  4. （十二）会话跟踪技术之servlet通信（forward和include）

    一.servlet通信方法 二.具体应用 scopeServlet.java protected void doPost(HttpServletRequest request, HttpServlet ...

  5. Win10使用Tex Live和VS Code和Latex Workshop插件编写Latex文档（未完成版本）

    首先取Tex Live官网下载安装包:https://www.tug.org/texlive/acquire-netinstall.html 我下载的是 http://mirror.ctan.org/ ...

  6. 【Leetcode_easy】690. Employee Importance

    problem 690. Employee Importance 题意:所有下属和自己的重要度之和,所有下属包括下属的下属即直接下属和间接下属. solution:DFS; /* // Employe ...

  7. idea的enable auto-import/内存设置

    设置pom.xml依赖的自动导入 设置idea的memory heap On the Help menu, click Edit Custom VM Options. Set the -Xmx opt ...

  8. LVS+KeepAlived+Nginx高可用实现方案

    文章目录概念LVSKeepAlived为什么要使用准备软件安装KeepAlived 安装源码安装yum安装服务启动.重启.关闭安装ipvsadmnginx安装防火墙(iptables)防火墙配置(方式 ...

  9. python 创建虚拟环境（virtualenv）

    原文地址:https://www.jianshu.com/p/2645d8f2e690 另附连接:Linux环境下虚拟环境virtualenv安装和使用 virtualenv 安装 1.Install ...

  10. 微服务发展规划（PS 大概分层未细化到具体系统）

    网关层 标准化认证业务前台 前置HTML 基于VUE的浏览器端渲染等特性,完全可以看成一个独立的层业务中台 a. 各个系统的业务功能,以业务功能为单位拆分出的业务服务. b. 配合业务前台所产生的聚合 ...