javascript--HTML DOM常用元素对象

二，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常用元素对象的更多相关文章

【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
【JavaScript】DOM之Document对象
JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...
使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
Javascript操作DOM常用API总结
基本概念在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...
DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个文档节点 . 所有的HTML元素都是 ...
js基础之DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个文档节点 . 所有的HTML元素都是 ...
javascript之DOM(二Document对象)
javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...
JavaScript：DOM对象
ylbtech-JavaScript:DOM对象 1. HTML DOM Document 对象返回顶部 1. HTML DOM Document 对象 HTML DOM 节点在 HTML DOM ...

随机推荐

android滑动标题栏渐变实现
import android.graphics.Color; import android.os.Build; import android.os.Bundle; import android.sup ...
JSP页面中如何注入Spring容器中的bean
第一步在JSP页面中导入下面的包: <%@page import="org.springframework.web.context.support.WebApplicationCont ...
ISO/IEC 9899:2011 条款6.2.7——兼容类型与组合类型
6.2.7 兼容类型与组合类型 1.两个类型具有兼容类型,如果它们的类型是相同的.用于判定两个类型是否兼容的其它规则在6.7.2关于类型说明符中,6.7.3关于类型说明符中,6.7.6关于声明符中描述 ...
SIT测试和 UAT测试
在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(Code Review)来保证软件符合客户需求且流程正确.下面简单介 ...
阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_06-用户认证-认证服务查询数据库-Bcrypt介绍
演示MD5加密的方式数据库内的数据密码虽然都是6个1但是每次加密出来的字符串是不一样的加盐测试BCrpty 循环10次加密密码的校验比人工的加盐要方便的多这是创建的一个Spring的Be ...
Java读取Excel文件（包括xls和xlsx）的样例程序
样例程序如下所示,其中: parseXls()函数依赖于jxl,只能读取xls格式文件: parseExcel()函数依赖于apache poi,能够读取xls和xlsx两种格式的文件. jxl的依赖 ...
不论报任何错误都是网络源有问题，安装spacemacs报错的解决方式
不论报任何错误都是网络源有问题打开.spacemacs ### 这是原头部 (defun dotspacemacs/layers () "Configuration Layers d ...
迷惑性很强的crontab
提到定时任务,我们通常会想起linux的crontab,可以说服务器端大部分定时任务都是由它完成的.这东西固然耗用,但是坑也不少. 这不,昨天我在部署一个备份任务的时候,就不幸踩坑了.差点酿成 ...
日常工作问题解决：使用vmvare克隆centos6虚拟机造成无eth0的解决办法
目录一.问题描述样本虚拟机配置有两张网卡,eth0.eth1,使用vmvare克隆虚拟机后,复制的虚拟机,没有网卡eth0,eth1,而是有eth2.eth3,如下所示: 二.原因分析复制系统中 ...
[转帖]1A2C多口充紫米USB充电器65W桌面快充版评测
1A2C多口充紫米USB充电器65W桌面快充版评测 2019年10月04日 07:48 1786 次阅读稿源:充电头网 1 条评论 https://www.cnbeta.com/articles/ ...

javascript--HTML DOM常用元素对象

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

随机推荐

热门专题