415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

DOM访问列表框、下拉菜单的常用属性：

form、length、options、selectedindex、type 使用options[index]返回具体选项所对应的常用属性：defaultselected、index、selected、text、value

DOM访问表格子元素的常用属性和方法：

caption、rows 通过rows[index]返回表格指定的行所对应的属性：cells 通过cells[index]返回表格指定的列所对应的属性：cellindex

DOM创建节点的方法：

document.createElement(Tag)，Tag必须是合法的HTML元素

DOM复制节点的方法：
节点cloneNode(boolean deep)，当deep为true时，表示复制当前节点以及当前结点的全部后代节点。为false时，只复制当前节点。

DOM添加、删除节点的方法：

appendChild(newNode) 将newNode添加成当前节点的最后一个子节点insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点

replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
removeChild(oldNode) 将oldNode子节点删除

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>查找列表框、下拉菜单控件</title>

</head>

<body>

<form action="#">

<select name="city" id="city" size="5">

    <option value="beijing">北京</option>

    <option value="shanghai" selected>上海</option>

    <option value="tianjin">天津</option>

    <option value="nabjing">南京</option>

    <option value="shenzhen">深圳</option>

    <option value="wuhan">武汉</option>

</select><br>

<input type="button" value="第一个城市" onClick="change('0')">

<input type="button" value="上一个城市" onClick="change(s.selectedIndex-1)">

<input type="button" value="下一个城市" onClick="change(s.selectedIndex+1)">

<input type="button" value="最后一个城市" onClick="change(s.length-1)">

</form>

</body>

<script type="text/javascript">

//    var f=document.getElementById('city').form;

//    alert(f.length);

    //获取下拉列表框的select元素对象d的个数

//    var s=document.getElementById('city');

//    alert(s.length);

    /*function first(){

        //

        var s=document.getElementById('city');

        //获取select中的第一个option元素

        var o=s.options[0];

        //获取option的文本

        alert(o.text);

    }

    function last(){

        //获取select元素

        var s=document.getElementById('city');

        //获取select选中元素的上一个y元素

        var o=s.options[s.selectedIndex-1];

        //获取option元素中的文本值

        alert(o.text);

    }

    function next(){

        //获取select元素

        var s=document.getElementById('city');

        //获取select选中元素的上一个y元素

        var o=s.options[s.selectedIndex+1];

        //获取option元素中的文本值

        alert(o.text);

    }

    function over(){

        //获取select元素

        var s=document.getElementById('city');

        //获取select选中元素的上一个y元素

        var o=s.options[s.length-1];

        //获取option元素中的文本值

        alert(o.text);}*/

    var s=document.getElementById('city');

    function change(index){

        //获取select元素

        //获取select选中元素的上一个y元素

        var o=s.options[index];

        //获取option元素中的文本值

        alert(o.text);}

    </script>

</html>

function getcaption(){

        //获取表格元素

        var tab=document.getElementById("mytable");

        //获取标题元素

        var cap=tab.caption;

        //获取标题中的内容

        alert(cap.innerHTML);

    }

        // 获取row-1行 col-1列的元素

        function getCell(row,col){

        // 获取表格元素

        var tab=document.getElementById("mytable");

        var cell=tab.rows[row-1].cells[col-1];

        // 获取单元格内容

        alert(cell.innerHTML);

    }

        // 获取row-1行col-1列的元素

        function getshow(row,col){

            // 获取表格元素

            var tab=document.getElementById("mytable");

            var cell=tab.rows[row-1].cells[col-1];

            // 获取单元格中的内容

            alert(cell.innerHTML);

    }

        function getqf(row,col){

        //获取表格元素

        var tab = document.getElementById("mytable");

        var cell = tab.rows[row-1].cells[col-1];

        //获取单元格中的内容

        alert(cell.innerHTML);

    }

    function change(){

        //获取用户输入的行的值

        var row=document.getElementById("row").value;

        //获取用户输入的l列的值

        var col=document.getElementById("cell").value;

        //获取y用户要修改单元格以后的值

        var content=document.getElementById("course").value;

        //获取表格对象

        var tab=document.getElementById("mytable");

        tab.rows[row-1].cells[col-1].innerHTML=content;

    }

    </script>

</head>

<body>

<table id="mytable" border="1">

    <caption>甲骨文课程表</caption>

    <tr>

        <td>HTML</td>

        <td>JavaScript</td>

    </tr>

    <tr>

        <td>javaSE</td>

        <td>Oracle</td>

    </tr>

    <tr>

        <td>MySQL</td>

        <td>Struts2</td>

    </tr>

</table>

<input type="button" value="表格标题" onClick="getcaption()">

<input type="button" value="第一行、第一格" onClick="getCell('1','1')">

<input type="button" value="第二行、第二格" onClick="getCell('2','2')">

<input type="button" value="第三行、第二格" onClick="getCell('3','2')"><br>

设置指定单元格的值：

第<input type="text" id="row" size="2">行，

第<input type="text" id="cell" size="2">列的值为

<input type="text" id="course" size="10">

<input type="button" id="btn_set" value="修改" onClick="change()" >

</body>

</html>

<title>创建元素</title>

<script type="text/javascript">

    /*function create(){

    //获取ul元素

        var u=document.getElementById("city");

        //创建新的节点li

        var l=document.createElement("li");

        //给li设置内容

        l.innerHTML="广州";

        //将li添加到ul元素中

        u.appendChild(l);

    }*/

    function create(){

        //创建新的节点li

        var l=document.createElement("li");

        //给li设置内容

        l.innerHTML="淄博";

        //获取ul元素

        var u=document.getElementById("city");

        //在ul的第一个元素前插入li元素

        u.insertBefore(l,u.firstChild.nextElementSibling);}

    function create(){

        //创建新的节点li

        var l=document.createElement("li");

        //给li设置内容

        l.innerHTML="高新区";

        //获取ul元素

        var u=document.getElementById("city");

        //将北京替换成南京

        u.replaceChild(l,u.firstChild.nextElementSibling);}

    function copy(){

        u=document.getElementById("city");

        //获取要复制 的节点

        var oldli=u.firstChild.nextElementSibling;

        //复制节点

        var newli=oldli.cloneNode(true);

        //将复制d的节点添加到ul里

        u.appendChild(newli);

    }

    function del(){

        //获取ul元素

        var u=document.getElementById("city");

        //获取要删除的子元素

        var oldli=u.lastChild.previousElementSibling;

        //删除上海

        u.removeChild(oldli);

    }

    </script>

</head>

<body>

<ul id="city">

    <li>淄博</li>

    <li>张店</li>

</ul>

<input type="button" value="创建插入替换节点" onClick="create()">

<input type="button" value="复制节点" onClick="copy()">

<input type="button" value="删除节点" onClick="del()">

</body>

</html>

<title>查找表单控件</title>

<script type="text/javascript">

    function create1(){

        //创建select元素

        var sel=document.createElement("select");

        //给select标签设置属性

        sel.id="city";

        sel.size="5";

        //获取body元素

        var bo=document.getElementById("test");

        //创建10个option元素

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

            var op=new Option("选项"+i,i);

            //列表框或下拉菜单对象.option[i]=创建好的option对象

            sel.options[i]=op;

            }

        //将select元素添加到body标签中

        bo.appendChild(sel);

    }

    </script>

</head>

<body id="test">

<input type="button" value="创建一个城市列表框" onClick="create1()">

<input type="button" value="一条条删除列表框的内容">

<input type="button" value="一次性清空列表框内容">

</body>

</html>

415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）的更多相关文章

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
jquery 事件监听方法
一.事件监听方法 mouseover() 鼠标移入事件方法 mouseout() 鼠标移出事件方法 mouseenter() 鼠标移入事件方法 mouseleave() 鼠标移出事件方法 ...
JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...
Easyui表单,文本框,下拉菜单三级联动练习代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
Android点击Button按钮的四种事件监听方法总结
首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...
DOM（十）使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
jQuery美化下拉菜单插件dropkick
dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

随机推荐

Cleartext HTTP traffic to xxx not permitted解决办法
,为保证用户数据和设备的安全,针对下一代 Android 系统(Android P) 的应用程序,将要求默认使用加密连接,这意味着 Android P 将禁止 App 使用所有未加密的连接,因此运行 ...
MySQL慢查询&执行计划
参考文章: https://blog.csdn.net/tiantianw/article/details/53334566 http://www.cnblogs.com/luyucheng/p/62 ...
django捡破烂
一 Django的model form组件这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库 ...
vue动态设置初始页
编译安装MySQL5.6失败的相关问题解决方案
Q0:需要安装git 解决方案: #CentOS yum install git #ubuntu apt-get install git Q1:CMAKE_CXX_COMPILER could be ...
Android 1.7 中不支持 lambda 表达式
Error:(129, 32) 错误: -source 1.7 中不支持 lambda 表达式 (请使用 -source 8 或更高版本以启用 lambda 表达式) lambda expressio ...
搭建一个MP-demo(mybatis_plus)
MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 搭建一个简单的MP-demo 1.配置pom.xml ...
k8s-jenkins 自动化1
一个流水线例子: 设置参数化构建: 流水线指令: def label = "docker-${UUID.randomUUID().toString()}" podTemplate( ...
Python 编写一个有道翻译的 workflow 教程
最近使用有道翻译的 workflow 总是翻译不了,可能是 appKey 失效了或者超过调用上限,所以打算自己实现一个. 创建 workflow 打开 Alfred3 的 Preferences,选择 ...
spring启动容器加载成功后执行调用方法
需求: 由于在微服务架构中各服务之间都是通过接口调用来进行交互的,像很多的基础服务,类似字典信息其实并不需每次需要的时候再去请求接口.所以我的想法是每次启动项目的时候,容器初始化完成,就去调用一下基础 ...

415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）的更多相关文章

随机推荐

热门专题

415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）的更多相关文章