二，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. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_09-前端显示当前用户-需求分析

    登陆成功 应该要显示用户的信息 cookie只存了用户的身份令牌.不包含用户的信息 拿着短令牌 请求认证服务获取到jwt.然后存储到sessionStorage 1.用户请求认证服务,登录成功. 2. ...

  2. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_07-SpringSecurityOauth2研究-Oauth2授权码模式-资源服务授权测试

    下面要完成  5.6两个步骤 3.3.4 资源服务授权 3.3.4.1 资源服务授权流程 资源服务拥有要访问的受保护资源,客户端携带令牌访问资源服务,如果令牌合法则可成功访问资源服务中的资 源,如下图 ...

  3. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明

    我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...

  4. tp5.1 model 方法下的like语句查询

    $where_like = ['title','like','%' . $_GET['title'] . '%']; $result_list = $this->model->where( ...

  5. python 高阶函数、柯里化

    高阶函数 First Class Object 函数在python中是一等公民 函数也是对象,可调用的对象 函数可作为普通变量.参数.返回值等等 高阶函数 数学概念 y=g(f(x)) 在数学和计算机 ...

  6. 一个区分度很大的iOS面试题

    @property 后面可以有哪些修饰符?@property中有哪些属性关键字? 属性可以拥有的特质分为四类: 原子性--- nonatomic 特质 在默认情况下,由编译器合成的方法会通过锁定机制确 ...

  7. maven仓库里如何搜索三方包？查看流行软件

    问题 这个仓库提供了搜索,但是功能比较弱,不支持groupid/artfactid的联合搜索 https://mvnrepository.com/ 解决 直接在搜索的url里添加groupid和art ...

  8. 【长期更新】Leetcode刷题心得与思考

    1.递归与动态规划的思考 Leetcode第95题 递归问题最重要的问题是想明白函数的作用是什么? 这个例子中函数的返回值就是给定a-b这个区间的数字,返回它所有可能的Tree,此时你不需要明白具体怎 ...

  9. python 优雅的解析 jsonp

    一段 jsonp 格式数据 mtopjsonpweexcb1({"api":"mtop.taobao.idle.recycle.nextspunav.get", ...

  10. 【VS开发】【miscellaneous】windows（64位）下使用curl命令

    windows(64位)下使用curl命令 Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景,因此这里研究下如何在windows下执行curl命令. 工具 ...