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

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. Docker EE 安装 on centos7

    本文演示如何在CentOS7上安装Docker EE. 1 安装方式 有两种方法可以 在Centos上安装和升级Docker企业版(Docker EE): YUM存储库:设置Docker存储库并从中安 ...

  2. 使用Visual Studio Team Services敏捷规划和项目组合管理（七）——流程定制

    使用Visual Studio Team Services敏捷规划和项目组合管理(七)--流程定制 在Team Services中,可以通过流程定制工作追踪体验.流程定义了工作项跟踪系统的构建部分,以 ...

  3. 使用SQL Developer生成Oracle数据库的关系模型（ER图）

    客户要一张数据库的关系模型图,于是用SQL Developer来做. 一.SQL Developer版本 我在官网下载的最新版本(现在已经到了18.1,Oracle更新的太勤快): 2.如下图所示选择 ...

  4. c/c++ 用克鲁斯卡尔（kruskal）算法构造最小生成树

    c/c++ 用克鲁斯卡尔(kruskal)算法构造最小生成树 最小生成树(Minimum Cost Spanning Tree)的概念: 假设要在n个城市之间建立公路,则连通n个城市只需要n-1条线路 ...

  5. c/c++柔性数组成员

    柔性数组成员 定义和声明分离 #include <stdio.h> //只是告诉编译器,当编译到使用到这个函数的的代码时,虽然还没有找到函数定义的实体,但是也让它编译不出错误. exter ...

  6. shell重定向介绍及使用

    我们在写脚本或用脚本时,往往会发现 > /dev/null 2>&1 这类的命令.之前都是简单的了解一下,并没有深度消化,直到自己写脚本时,不认真写成了2>&1 &g ...

  7. 代码管理工具：Git 和 Svn 的简单操作

    1. git 先注册git config --global user.name "name" git config --global user.email "email& ...

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

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

  9. 线程--实现Runnable接口

    实现Runnable接口,创建线程步骤: 1.定义类,并实现Runnable接口 2.重写Runnable接口中的run()方法 3.通过Thread类建立线程对象 4.将实现了Runnable接口的 ...

  10. human pose estimation

    2D Pose estimation主要面临的困难:遮挡.复杂背景.光照.真实世界的复杂姿态.人的尺度不一.拍摄角度不固定等. 单人姿态估计 传统方法:基于Pictorial Structures, ...