--------------------------习惯是社会的巨大的飞轮和最可贵的维护者。——威·詹姆斯

day 49

[value属性操作]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    姓名:
    <input type="text" name="user" value="" id="i1">
    <hr>
    籍贯:
    <select name="pro" id="i2" multiple="multiple">
        <option value="1">湖北省</option>
        <option value="2">湖南省</option>
        <option value="3">河南省</option>
    </select>
    <hr>
    简介:
    <textarea name="info" id="i3" cols="30" rows="10">

    </textarea>
    <hr>
    <input type="submit">
</form>

<script>

         let i1=document.getElementById("i1");
         let i2=document.getElementById("i2");
         let i3=document.getElementById("i3");

         console.log(i1.value);
         console.log(i2.value);
         console.log(i3.value);

</script>

</body>
</html>
[节点的增删改查]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="p1">
    <h3 class="title">WELCOME!</h3>
</div>
<hr>
<div class="c1">
    <div><button class="add">一 展示图片</button></div>
</div>
<hr>
<div class="c2">
    <button class="rem">删除节点 </button>
    <h4>欢迎删除,圣诞快乐!</h4>
</div>
<hr>
<div class="c3">
    <button class="replace">替换节点 </button>
</div>

<script>
     // 1 创建节点添加节点
    let ele=document.getElementsByClassName("add")[0];
    ele.onclick=function () {
             // 1 创建节点对象  <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
             let img=document.createElement("img") ; // <img >
             img.setAttribute("src","imgs/圣诞老人.png");// <img src="imgs/圣诞老人.png">
             img.setAttribute("width","200");
             img.setAttribute("height","200");//  <img src="imgs/圣诞老人.png" alt="" width="200" height="200">
             console.log(img);
            // 2  添加节点  父节点.appendchild(添加节点)
            let pele=document.getElementsByClassName("c1")[0];
            pele.appendChild(img)

    };
    // 2 删除节点   父节点.removeChild(删除节点)
    let ele2=document.getElementsByClassName("rem")[0];
    ele2.onclick=function () {
            let pele2=document.getElementsByClassName("c2")[0];
            pele2.removeChild(this.nextElementSibling);
    };

    // 替换节点  父节点.replaceChild(新节点,旧节点)
     let ele3=document.getElementsByClassName("replace")[0];
     ele3.onclick=function () {
             //   父节点
             let pele3=document.getElementsByClassName("p1")[0];
             // 新节点
             let p=document.createElement("p");  //    <p></p>
             p.innerHTML="深圳欢迎您!";
            // 旧节点
             let title=document.getElementsByClassName("title")[0];
             pele3.replaceChild(p,title)
    }
</script>

</body>
</html>
[js事件]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
           color: red;
            margin-left: 10px;
        }
    </style>
    <script>

        window.onload=function(){
                // 1 创建节点添加节点
                let ele=document.getElementsByClassName("c1")[0];
                ele.onfocus=function () {
                   console.log("获取光标!")

                };
                ele.onblur=function () {
                    console.log("退出光标!")
                };

                ele.onselect=function () {
                    console.log("正在拷贝该文本!")
                };

                 let form=document.getElementById("form");
                 form.onsubmit=function () {
                        // 校验数据
                        let user=document.getElementById("user").value;
                        let email=document.getElementById("email").value;
                        console.log(user,email);
                        if (user.length<5){
                            console.log("长度不够!");
                            document.getElementById("user").nextElementSibling.innerHTML="长度不够";
                             setTimeout(function () {
                                  document.getElementById("user").nextElementSibling.innerHTML="";
                             },1000);
                            return false

                        }
                 };
        }
    </script>

</head>
<body>

<input type="text" class="c1">

<hr>

<form id="form" action="" method="get">
    <div>
        <label for="user">姓名</label>
        <input type="text" name="user" id="user"><span class="error"></span>
    </div>
      <div>
        <label for="email">邮箱</label>
        <input type="text" name="email" id="email"><span class="error"></span>
    </div>
    <input type="submit">
</form>

</body>
</html>

[二级联动]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<select name="" id="pros">
    <option value="0">请选择省份</option>
    <option value="1">河北省</option>
    <option value="2">广东省</option>
    <option value="3">湖南省</option>
</select>
<select name="" id="citys">
    <option value="">请选择城市</option>
</select>

<script>
      // 1 数据结构
      let data={
          "1":["石家庄","邯郸","邢台","衡水","保定"],
          "2":["东莞","惠州"," 广州","汕头","深圳"],
          "3":["长沙","张家界","湘潭","娄底"],
      };

     let pro=document.getElementById("pros");
     let city=document.getElementById("citys");
     pro.onchange=function () {
         console.log(this.value);
         //2 获取用户选择省份
         let choose_pro=this.value;
         // 3 获取省份对应的城市列表
         let citys=data[choose_pro];
         console.log(citys);

         // 清除操作
         city.options.length=1;
         // 循环添加
         for(var i=0;i<citys.length;i++){

             // 创建option标签
             let option=document.createElement("option")//    <option></option>
             option.innerText=citys[i];
             option.value=i+1;
             // 添加标签
             city.appendChild(option);
         }
     }
</script>

</body>
</html>

DOM操作 JS事件 节点增删改查的更多相关文章

  1. springLdap 操作ldap示例（增删改查）

    转自:http://blog.csdn.net/sundenskyqq/article/details/9002440 这部分的示例网上的确有很多,但是个人在查找的过程中还是感到不够满意,所以就自己总 ...

  2. zkCli的使用 常用的节点增删改查命令用法

    zkCli的使用 常用的节点增删改查命令用法 1. 建立会话  命令格式:zkCli.sh -timeout 0 -r -server ip:port ./zkCli.sh -server -time ...

  3. java中XML操作：xml与string互转、读取XML文档节点及对XML节点增删改查

    一.XML和String互转: 使用dom4j程式变得很简单 //字符串转XML String xmlStr = \"......\"; Document document = D ...

  4. Zookeeper节点增删改查与集群搭建（笔记）

    1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...

  5. EF Codefirst 多对多关系 操作中间表的 增删改查（CRUD）

    前言 此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订单表和员工表建立多对多关系. 首先是订单表: public class Ord ...

  6. mySQL CRUD操作（数据库的增删改查）

    一.数据库操作 1.创建数据库 create database 数据库名称 2.删除数据库 drop database 数据库名称   二.表操作 1．创建表 create table 表名 (    ...

  7. JS源生代码“增删改查”之增

    51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...

  8. Node.js之mysql增删改查

    1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...

  9. DjangoMTV模型之model层——ORM操作数据库（基本增删改查）

    Django的数据库相关操作 对象关系映射(英语:(Object Relational Mapping,简称ORM),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...

随机推荐

  1. mssql sqlserver in 关键字在值为null的应用举例

    转自:http://www.maomao365.com/?p=6873 摘要: 下文通过案例分析in 关键字在值为null的应用举例, 分析出not in关键字在null值产生的异常信息 如下所示: ...

  2. MYSQL主从同步/主主同步

    一.MYSQL主从同步 注意:进行主从同步操作时需要确保DB无写操作 flush tables with read lock:   //全局读锁定,执行了命令之后所有库所有表都被锁定只读. 1.在主机 ...

  3. c/c++ 函数模板初探

    函数模板初探 1,由来:有时候,函数的逻辑是一样的,只是参数的类型不同,比如下面 int Max(int a, int b){ return a > b ? a : b; } double Ma ...

  4. 好系统重装助手教你清理win7系统中DNS缓存

    在我们使用电脑的过程中,有时候一个经常用的网页突然打不开了,遇到这种情况,清理一下DNS缓存就可以解决了.如何清理DNS缓存?小编这就给大家说一种最简单的方法. 1.组合键:win+R,输入cmd,点 ...

  5. 阿里云短信服务调用例子-Python

    阿里云短信服务调用例子 阿里云官方文档https://helpcdn.aliyun.com/document_detail/101893.html 首先需要安装阿里云PythonSDK(下面是pyth ...

  6. Spring的AOP基于AspectJ的注解方式开发2

    参考自黑马培训机构 上一篇博客提到了在配置文件中开启aop的注解开发,以及简单使用了@Before,@Aspect 这是为了告诉spring为前置通知和切面类 接下来介绍aop的注解的通知类型,和切入 ...

  7. qemu 虚拟机

    http://blog.csdn.net/caspiansea/article/details/12986565

  8. 在Linux上搭建VisualSVN Server（svn服务端）

    一.检查是否安装了低版本的SVN #  rpm -qa | grep subversion 如果已安装SVN,则会返回版本信息.这时需要卸载旧版本的SVN. 卸载旧版本SVN # yum remove ...

  9. 2.03-handler_openner

    import urllib.request def handler_openner(): #系统的urlopen并没有添加代理的功能所以需要我们自定义这个功能 #安全 套接层 ssl第三方的CA数字证 ...

  10. sqlserver 2000数据压缩解决方法

    --sqlserver 2000数据压缩解决方法. /************************************************************************* ...