二，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. java如何获取访问真实IP地址？

    java如何获取访问真实IP地址 解决方法: 获取请求主机IP地址,如果通过代理进来,则透过防火墙获取真实IP地址,如果没有代理,则获取真实ip public static String getIp( ...

  2. Release报错Debug无错

    代码在Release模式下会crash,Debug模式下可以运行,最后定位到原因 for (size_t j = 0; j < ids.size()-1; ++j) { } 发现问题是Relea ...

  3. Unity与Android刘海屏适配

    本周学习Unity与Android刘海屏适配 关于刘海屏适配部分 网上有很多教程 这里只是做一下整理 https://blog.csdn.net/xj1009420846/article/detail ...

  4. 网络编程(socket).WinSocket_recvfrom出错，GetLastError()为10054

    1.在写 我的Qt598(vs2017)x64版本的 shadowsocks程序时遇到的. 具体问题情况 大概是这样:QUdpSocket(假设是sktA) connect接收函数,sktA侦听 端口 ...

  5. 最新 满帮java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.满帮等10家互联网公司的校招Offer,因为某些自身原因最终选择了满帮.6.7月主要是做系统复习.项目复盘.LeetCode ...

  6. springboot使用activemq同时接收queue和topic消息

    原文链接:https://blog.csdn.net/jia_costa/article/details/79354478 新建springboot项目, pom文件如下 <?xml versi ...

  7. 日常工作问题解决：Redhat6.5--解决yum无法正常安装配置问题

    1.问题描述 解决RedHat6.5下yum功能不能用问题: 在redhat6.5下使用yum安装时,会提示:This system is not registered to Red Hat Subs ...

  8. IO-file-06 文件夹的遍历

    /** * 列出下一级 * 1.list():  列出下级名称  String[] list = dir.list(); * 2.listFiles():列出下级File对象 File[] listF ...

  9. Ctrl+Tab

    很好用的快捷键. 可以在浏览器中自由切换,也可以在编辑器中自由切换.

  10. Fiddler之打断点

    1..Fiddler可以修改以下请求 --Fiddler设置断点,可以修改HTTP请求头信息,如修改Cookie,User-Agent等 --可以修改请求数据,突破表单限制,提交任意数字,如充值最小1 ...