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

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. SQL 中常用存储过程xp_cmdshell运行cmd命令

    目的: 使用SQL语句,在D盘创建一个文件夹myfile 首先查询系统配置 SELECT * FROM sys.configurations WHERE name='xp_cmdshell' OR n ...

  2. BurpSuit添加CA证书拦截HTTPS通信

    问题 BurpSuit 安装成功后可以直接使用代理对使用 HTTP 协议通信的会话进行拦截,但是对于使用 HTTPS 协议通信的会话进行代理使用时就会出现如下画面 例如访问百度主页: 原因 HTTPS ...

  3. c/c++ 标准容器 之 初始化， 赋值， swap， 比较

    c/c++ 标准容器 之 初始化, 赋值, swap, 比较 知识点 1,容器的初始化,对应代码里的test1 2,标准库array的初始化,对应代码里的test2 3,容器的赋值 ,对应代码里的te ...

  4. php学习----运算符

    PHP 1.运算符 加减乘除与数学运算无异 但PHP的赋值运算符有两种,分别是: (1)"=":把右边表达式的值赋给左边的运算数.它将右边表达式值复制一份,交给左边的运算数.换而言 ...

  5. Golang 并发简介

    并发概要 随着多核CPU的普及, 为了更快的处理任务, 出现了各种并发编程的模型, 主要有以下几种: 模型名称 优点 缺点 多进程 简单, 隔离性好, 进程间几乎无影响 开销最大 多线程 目前使用最多 ...

  6. MonkeyRunner测试工具小结

    一.MonkeyRunner介绍: MonkeyRunner是Google提供的一个基于坐标点的Android黑盒自动化测试工具.Monkeyrunner工具提供了一套API让用户/测试人员来调用,调 ...

  7. 《Java大学教程》—第16章 二维数组

    多维(Multi-dimensional)数组维数由索引个数决定.常用的数组:一维(one-dimensional)数组.二维(two-dimensional)数组 16.2    创建二维数组索引从 ...

  8. python 线程队列、线程池、全局解释器锁GIL

    一.线程队列 队列特性:取一个值少一个,只能取一次,没有值的时候会阻塞,队列满了,也会阻塞 queue队列 :使用import queue,用法与进程Queue一样 queue is especial ...

  9. python 时间模块(time ,datetime,calendar)

    Python中提供了时间相关的内置模块,我们主要用的是:time模块.datetime模块和calendar模块 ⽇期格式化的标准: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(00 ...

  10. 【Java基础】char

    1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a';  //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=1 ...