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

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. Apache Linux下Apache安装步骤

    Apache简介         Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广 ...

  2. AIOps 平台的误解，挑战及建议（中）— AIOps常见的误解

    本文篇幅较长,分为上,中,下,三个部分进行连载.内容分别为:AIOps 背景/所应具备技术能力分析(上),AIOps 常见的误解(中),挑战及建议(下). 前言 我大概是 5,6 年前开始接触 ITO ...

  3. HTTP Authentication

    PS:近期看了一本思维导图的书,实践一下.

  4. ERROR 3009 (HY000): Column count of mysql.user is wrong…..

    在测试备份还原时,使用XtraBackup还原数据库后,创建一个测试账号时遇到了下面错误: mysql> grant all on house.* to test@'192.168.%' ide ...

  5. [20180819]关于父子游标问题(11g).txt

    [20180819]关于父子游标问题(11g).txt --//sql语句存在父子游标,子游标堆6在父游标堆0里面.--//如果存在许多子游标的情况下,父游标堆0是否大小是发生变化呢.测试看看.--/ ...

  6. [20170606]11G _optimizer_null_aware_antijoin.txt

    [20170606]11G _optimizer_null_aware_antijoin.txt --//上午测试_optimizer_null_aware_antijoin,发现自己不经意间又犯了一 ...

  7. C#面向对象 类

    ; i < ; i++) { student.b++;//静态字段若不赋值,默认为1: new student().a++;//引用类型变量定义后,必须使用new关键字创建对象 才能后才能使用 ...

  8. 洗礼灵魂，修炼python（70）--爬虫篇—补充知识：json模块

    在前面的某一篇中,说完了pickle,但我相信好多朋友都不懂到底有什么用,那么到了爬虫篇,它就大有用处了,而和pickle很相似的就是JSON模块 JSON 1.简介 1)JSON(JavaScrip ...

  9. cp 拷贝

    cp -a = cp -pdr p (preserve 保持)  复制时保持文件原有的属性(preserve) 模式 所有权 时间戳 d 连接文件 no dereference 复制时拷备连接文件的属 ...

  10. 线程--实现Runnable接口

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